---

Ionic 列表提供了一种方便且易于理解的用户界面，可以生成各种样式、可滚动的列表、按钮和选项卡等元素。本文将介绍Ionic列表的创建、样式、自定义和操作等内容。

创建列表

首先，要创建一个列表，需要在 HTML 文件中添加一个 <ion-list> 标记，其中可以包含一个或多个 <ion-item>。如下所示：

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

列表样式

Ionic 列表提供多种选项，可以根据需要进行更改。使用以下类名可以更改列表的样式：

• ion-list-header：可以用来添加列表标题。
• ion-item：用于定义每个列表项。
• ion-item-divider：可以用于分割列表中的内容。
• ion-item-group：用于将 ion-item 组合成一个单独的组。
• ion-item-sliding：可以添加滑动操作。

以下是一个基本示例：

<ion-list>
  <ion-list-header>
    我的任务列表
  </ion-list-header>
  <ion-item>
    开会
  </ion-item>
  <ion-item>
    写代码
  </ion-item>
  <ion-item>
    回家
  </ion-item>
</ion-list>

结果如下图所示：

自定义列表

Ionic 列表是易于自定义的。可以通过以下方式自定义列表：

1. 使用自定义 CSS 样式

您可以使用自定义 CSS 样式来更改列表的外观。可以通过应用新的 CSS 样式表或使用内联样式覆盖默认样式来指定样式。

2. 使用自定义模板

您可以使用自定义模板来创建列表，然后将它绑定到 Angular 组件中。这样，您就可以更好地控制列表中每个项目的外观及其内容。

3. 使用自定义指令

可以创建自定义指令并使用它来更改 Ionic 列表中的元素。

操作列表

Ionic 列表有几种操作，可以让用户与列表交互。下面是一些操作：

1. 点击列表项

用户可以通过单击每个 <ion-item> 元素来选择该项。可以将选择事件绑定到该元素的 click 事件，以便在用户选择该项时执行代码。

2. 添加滑动操作

可以通过向 <ion-item> 元素添加“滑动”样式来添加滑动操作。滑动操作可以是左滑或右滑，可以显示不同的操作按钮。例如，可以将 delete 操作添加到列表项上，以便允许用户从列表中删除该项。

<ion-list>
  <ion-item-sliding>
    <ion-item>
      <ion-label>
        Item
      </ion-label>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option color="danger" expandable>
        Delete
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

如上图所示，滑动列表项将出现删除按钮。

3. 添加选择框

可以通过向 <ion-item> 元素添加 checkbox 样式来添加选择框。选择框可以让用户一次性选择多个项目。

<ion-list>
  <ion-item>
    <ion-label>选项 1</ion-label>
    <ion-checkbox slot="end"></ion-checkbox>
  </ion-item>
  <ion-item>
    <ion-label>选项 2</ion-label>
    <ion-checkbox slot="end"></ion-checkbox>
  </ion-item>
  <ion-item>
   <ion-label>选项 3</ion-label>
   <ion-checkbox slot="end"></ion-checkbox>
 </ion-item>
</ion-list>

以上是 Ionic 列表基础操作的简要介绍，希望本文对您有所帮助。