Ionic组件之lists，Ionic列表组件的种类比较多，总共有9种列表方式。

基本列表效果图

直接上代码

lists.ts

import { Component } from '@angular/core';

@Component({
    templateUrl:'lists.html'
})

export class Lists{
    items = [
        'Pokémon Yellow',
        'Super Metroid',
        'Mega Man X',
        'The Legend of Zelda',
        'Pac-Man',
    ];
    itemSelected(item:string){
        console.log('Selected Item',item);
    }
}

lists.html

<ion-header>
    <ion-navbar>
        <ion-title>Lists</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <!--这里主要有3种列表方式，基本列表，没有下边框列表no-lines,内嵌列表inset-->
    <ion-list no-lines inset>
        <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">{{item}}</button>
    </ion-list>
    <!--List Dividers-->
    <ion-item-group>
        <ion-item-divider color="light">A</ion-item-divider>
        <ion-item>Angola</ion-item>
        <ion-item>Angola</ion-item>
    </ion-item-group>
    <ion-item-group>
        <ion-item-divider color="light">B</ion-item-divider>
        <ion-item>Bngola</ion-item>
        <ion-item>Bgola</ion-item>
    </ion-item-group>
    
    <!--List Headers-->
    <ion-list>
        <ion-list-header>Action</ion-list-header>
        <ion-item>Terminator II</ion-item>
        <ion-item>The Empire Strikes Back</ion-item>
        <ion-item>Blade Runner</ion-item>
    </ion-list>

    <!--Icon List-->
    <ion-list>
        <ion-item>
            <ion-icon name="leaf" item-start></ion-icon>
            Herbology
            <ion-icon name="rose" item-end></ion-icon>
        </ion-item>
    </ion-list>

    <!--Avatar List-->
    <ion-list>
        <ion-item>
            <ion-avatar item-start>
                <img src="img/avatar-cher.png">
            </ion-avatar>
            <h2>Cher</h2>
            <p>Ugh. As if.</p>
        </ion-item>
    </ion-list>

    <!--Multi-line List-->
    <ion-list>
        <ion-item>
            <ion-avatar item-start>
                <img src="img/avatar-finn.png">
            </ion-avatar>
            <h2>Finn</h2>
            <h3>Don't Know What To Do!</h3>
            <p>I've had a pretty messed up day. If we just...</p>
        </ion-item>
    </ion-list>

    <!--Thumbnail List-->
    <ion-list>
        <ion-item>
            <ion-thumbnail item-start>
                <img src="img/thumbnail-totoro.png">
            </ion-thumbnail>
            <h2>My Neighbor Totoro</h2>
            <p>Hayao Miyazaki • 1988</p>
            <button ion-button clear item-end>View</button>
        </ion-item>
    </ion-list>

    <!--Sliding List-->
    <ion-list>
        <ion-item-sliding>
            <ion-item>
                <ion-avatar item-start><img src="img/slimer.png"></ion-avatar>
                <h2>Slimer</h2>
            </ion-item>
            <ion-item-options side="left">
                <button ion-button color="primary"><ion-icon name="text"></ion-icon>Text</button>
                <button ion-button color="secondary"><ion-icon name="text"></ion-icon>Call</button>
            </ion-item-options>
            <ion-item-options side="right">
                <button ion-button color="primary">
                    <ion-icon name="mail"></ion-icon>Email
                </button>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>

</ion-content>