Ionic 列表操作学习笔记

1. 创建列表

在 Ionic 中，可以通过 ion-list 元素创建一个列表。示例代码如下：

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

2. 在列表中添加图标

可以在列表项中添加图标，例如 ion-icon 元素。示例代码如下：

htmlCopy Code
<ion-list>
  <ion-item>
    <ion-icon name="person"></ion-icon>
    Person 1
  </ion-item>
  <ion-item>
    <ion-icon name="person"></ion-icon>
    Person 2
  </ion-item>
</ion-list>

3. 在列表中添加缩略图

可以在列表项中添加缩略图，例如 ion-thumbnail 元素。示例代码如下：

htmlCopy Code
<ion-list>
  <ion-item>
    <ion-thumbnail slot="start">
      <img src="path/to/image.jpg">
    </ion-thumbnail>
    Item 1
  </ion-item>
  <ion-item>
    <ion-thumbnail slot="start">
      <img src="path/to/image.jpg">
    </ion-thumbnail>
    Item 2
  </ion-item>
</ion-list>

4. 在列表中添加按钮

可以在列表项后面添加按钮，例如 ion-button 元素。示例代码如下：

htmlCopy Code
<ion-list>
  <ion-item>
    Item 1
    <ion-button slot="end">Button</ion-button>
  </ion-item>
  <ion-item>
    Item 2
    <ion-button slot="end">Button</ion-button>
  </ion-item>
</ion-list>

5. 在列表中添加复选框或单选框

可以在列表项前面添加复选框或单选框，例如 ion-checkbox 或 ion-radio 元素。示例代码如下：

htmlCopy Code
<ion-list>
  <ion-item>
    <ion-checkbox slot="start"></ion-checkbox>
    Item 1
  </ion-item>
  <ion-item>
    <ion-radio slot="start"></ion-radio>
    Item 2
  </ion-item>
</ion-list>

以上就是 Ionic 列表操作的基本内容，通过这些知识可以创建出更加丰富多彩的列表。