ionic4学习笔记8--UI组件2列表（没有实践，直接摘抄）

我不是女神ヾ 2023-02-20 02:11 7阅读 0赞

1、 普通列表

<ion-list>
    <ion-item>
    <ion-label>Peperoni</ion-label>
    </ion-item>
    <ion-item>
    <ion-label>Hawaii</ion-label>
    </ion-item>
    </ion-list>

如果普通列表加上路由跳转的话列表将会自动加上箭头。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70][]

2、 分组列表 ion-item-divider

<ion-list>
    <ion-item-divider>
    <ion-label>
    Section A
    </ion-label>
    </ion-item-divider>
    <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>
    Section 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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 1][]

3、 列表中带图标  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 2][]

<ion-list>
    <ion-item>
    <ion-icon slot="start" name="people"></ion-icon>
    <ion-label>个人中心</ion-label>
    <ion-icon slot="end" name="arrow-forward"></ion-icon>
    </ion-item>
    <ion-item>
    <ion-icon slot="start" name="wallet" color="success"></ion-icon>
    <ion-label>钱包</ion-label>
    <ion-icon slot="end" name="arrow-forward"></ion-icon>
    </ion-item>
    </ion-list>

4、 列表中的头像  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 3][]

<ion-list>
    <ion-item>
    <ion-avatar>
    <img src="assets/01.png">
    </ion-avatar>
    <ion-label>沃尔玛无人收银系统</ion-label>
    </ion-item>
    <ion-item>
    <ion-avatar>
    <img src="assets/02.png">
    </ion-avatar>
    <ion-label>Hawaii</ion-label>
    </ion-item>
    <ion-item>
    <ion-avatar>
    <img src="assets/03.png">
    </ion-avatar>
    <ion-label>haha </ion-label>
    </ion-item>
    </ion-list>

5、 列表中的图片 ion-thumbnail  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 4][]

<ion-list>
    <ion-item>
    <ion-thumbnail slot="start">
    <img
    src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
    </ion-thumbnail>
    <ion-label>Peperoni</ion-label>
    </ion-item>
    <ion-item>
    <ion-thumbnail slot="start">
    <img src="assets/03.png">
    </ion-thumbnail>
    <ion-label>Hawaii</ion-label>
    </ion-item>
    <ion-item>
    <ion-thumbnail slot="end">
    <img src="assets/01.png">
    </ion-thumbnail>
    <ion-label>Hawaii</ion-label>
    </ion-item>
    <ion-item>
    <ion-thumbnail slot="end">
    <img src="assets/02.png">
    </ion-thumbnail>
    <ion-label>Hawaii</ion-label>
    </ion-item>
    <ion-item>
    <ion-thumbnail slot="end">
    <img src="assets/03.png">
    </ion-thumbnail>
    <ion-label>Hawaii</ion-label>
    </ion-item>
    </ion-list>

6、 滑动列表  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 5][]

滑动列表就是在对应的列表上面滑动可以出现对应的按钮

<ion-list>
    <ion-item-sliding>
    <ion-item>
    <ion-label>Item1</ion-label>
    </ion-item>
    <ion-item-options side="start">
    <ion-item-option (click)="favorite(item)">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-item-sliding>
    <ion-item>
    <ion-label>Item2</ion-label>
    </ion-item>
    <ion-item-options side="start">
    <ion-item-option 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 color="success">Unread</ion-item-option>
    </ion-item-options>
    </ion-item-sliding>
    </ion-list>

7、 ion-item 的属性

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200621184927179.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200621185026254.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200621185112652.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200621185148453.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020062118522119.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200621185311999.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n,size_16,color_FFFFFF,t_70