ionic4——list

最新推荐文章于 2023-11-10 10:29:59 发布

原创最新推荐文章于 2023-11-10 10:29:59 发布 · 511 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

61 篇文章

订阅专栏

本文详细介绍了Ionic4中不同类型的列表，包括普通列表、分组列表、带图标列表、带头像列表、带图片列表以及支持滑动操作的列表，全面覆盖了列表的各种展示方式和交互功能。

【普通列表】

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>