ionic——list

【普通列表】

export class ListPage implements OnInit {
    // 建立一个空数组
    public list: any = [];
    constructor() { }
    ngOnInit() {
        for (let i = 0; i < 10; i++) {
        this.list.push(`我是第${i}条数据`);
        }
    }
}

<ion-list>
    <ion-item *ngFor="let item of list" [routerLink]="['/button']">
        <ion-label>{{item}}</ion-label>
    </ion-item>
</ion-list>

【分组列表】

<ion-list>
    <ion-item-divider>
        <ion-label>A</ion-label>
    </ion-item-divider>

    <ion-item>
        <ion-label>aaaa</ion-label>
    </ion-item>
    <ion-item>
        <ion-label>aaa</ion-label>
    </ion-item>
    <ion-item>
        <ion-label>A1</ion-label>
    </ion-item>
    <ion-item>
        <ion-label>A2</ion-label>
    </ion-item>
    <ion-item>
        <ion-label>A3</ion-label>
    </ion-item>

    <ion-item-divider>
        <ion-label>B</ion-label>
    </ion-item-divider>

    <ion-item>
        <ion-label>B1</ion-label>
    </ion-item>
    <ion-item> 
        <ion-label>B2</ion-label>
    </ion-item>
    <ion-item>
        <ion-label>B3</ion-label>
    </ion-item>
</ion-list>

【带图标列表】

<ion-list lines="full">
    <ion-item>
        <ion-icon slot="start" name="people" color="danger"></ion-icon>
        <ion-label>用户中心</ion-label>
    </ion-item>
    <ion-item>
        <ion-icon slot="start" name="settings" color="success"></ion-icon>
        <ion-label>设置</ion-label>
    </ion-item>
</ion-list>

【带头像列表】

<ion-list>
    <ion-item>
        <ion-avatar slot="start">
            <img src="assets/01.jpg">
        </ion-avatar>
        <ion-label>Awesome Label</ion-label>
    </ion-item>
    <ion-item>
        <ion-avatar slot="start">
            <img src="assets/01.jpg">
        </ion-avatar>
        <ion-label>Awesome Label</ion-label>
    </ion-item>
    <ion-item>
        <ion-avatar slot="start">
            <img src="assets/01.jpg">
        </ion-avatar>
        <ion-label>Awesome Label</ion-label>
    </ion-item>
</ion-list>

【带图片列表】

<ion-list class="mylist">
    <ion-item>
        <ion-thumbnail slot="start">
            <ion-img src="assets/01.jpg" alt=""></ion-img>
        </ion-thumbnail>
        <div class="info">
            <h3>我是新闻</h3>
            <p>新闻介绍新闻介绍新闻介绍新闻介绍新闻介绍新闻介绍新闻介绍新闻介绍</p>
        </div>
    </ion-item>

    <ion-item>
        <ion-thumbnail slot="end">
            <ion-img src="assets/01.jpg" alt=""></ion-img>
        </ion-thumbnail>
        <ion-label> item111 </ion-label>
    </ion-item>
</ion-list>

.mylist{
    ion-item{
    line-height:3;
    .info{
        h3{
             font-size: 16px;
             padding: 2px;
             margin:0px;
          }
        p{
             font-size: 13px;
             padding: 2px;
             margin:0px;
             line-height:1.5;
         }
    }
    }
}

【滑动列表】

<ion-list>
    <ion-item-sliding>
        <ion-item>
            <ion-label>Item111</ion-label>
        </ion-item>

        <ion-item-options side="start">
            <ion-item-option (click)="favorite(item)">Favorite1</ion-item-option>
            <ion-item-option color="primary" (click)="share(item)">Share1</ion-item-option>
        </ion-item-options>

        <ion-item-options side="end">
            <ion-item-option (click)="unread(item)">Unread</ion-item-option>
        </ion-item-options>
    </ion-item-sliding>



    <ion-item-sliding> 
        <ion-item>
            <ion-label>Item222</ion-label>
        </ion-item>
        <ion-item-options side="start">
            <ion-item-option (click)="favorite(item)" color="success">Favorite</ion-item-option>
            <ion-item-option color="primary" (click)="share(item)">Share</ion-item-option>
        </ion-item-options>
        <ion-item-options side="end">
            <ion-item-option (click)="unread(item)">Unread</ion-item-option>
        </ion-item-options>
    </ion-item-sliding>
</ion-list>