Ionic 列表学习笔记

Ionic 提供了丰富的列表组件，包括基础列表、滑动删除列表、复选框列表、单选框列表、分组列表等。这些组件可以帮助我们快速实现各种复杂列表结构，提高开发效率。

基础列表

基础列表是最常用的列表类型，可以使用 <ion-list> 标签来创建。每个列表项一般使用 <ion-item> 标签来定义。

htmlCopy Code
<ion-list>
  <ion-item>
    Item 1
  </ion-item>
  <ion-item>
    Item 2
  </ion-item>
  <ion-item>
    Item 3
  </ion-item>
</ion-list>

滑动删除列表

滑动删除列表是一种常用的列表类型，允许用户在左滑或右滑后删除列表项。Ionic 提供了 <ion-item-sliding> 和 <ion-item-options> 标签来实现滑动删除功能。

htmlCopy Code
<ion-list>
  <ion-item-sliding>
    <ion-item>
      Item 1
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option color="danger" expandable (click)="deleteItem()">Delete</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
  <ion-item-sliding>
    <ion-item>
      Item 2
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option color="danger" expandable (click)="deleteItem()">Delete</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

复选框列表

复选框列表可以让用户选择多个项，可以使用 <ion-checkbox> 标签来实现。

htmlCopy Code
<ion-list>
  <ion-item>
    <ion-label>Checkbox 1</ion-label>
    <ion-checkbox slot="end"></ion-checkbox>
  </ion-item>
  <ion-item>
    <ion-label>Checkbox 2</ion-label>
    <ion-checkbox slot="end"></ion-checkbox>
  </ion-item>
</ion-list>

单选框列表

单选框列表可以让用户选择一个选项，可以使用 <ion-radio> 标签来实现。

htmlCopy Code
<ion-list>
  <ion-radio-group>
    <ion-item>
      <ion-label>Option 1</ion-label>
      <ion-radio slot="end" value="option1"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Option 2</ion-label>
      <ion-radio slot="end" value="option2"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

分组列表

分组列表可以将列表项分为不同的组别，可以使用 <ion-list-header> 标签来定义分组头部，使用 *ngFor 来循环渲染列表项。

htmlCopy Code
<ion-list>
  <ion-list-header>Group 1</ion-list-header>
  <ion-item *ngFor="let item of group1">
    {{ item }}
  </ion-item>
  <ion-list-header>Group 2</ion-list-header>
  <ion-item *ngFor="let item of group2">
    {{ item }}
  </ion-item>
</ion-list>

以上是 Ionic 列表的基本使用方法，你可以根据实际需要自由组合和调整。