融云IM干货丨uni-app中的uni-list 插件具体怎么用？

uni-list 是 uni-app 中用于构建列表的组件，以下是具体的使用方法：

1. 基本用法

• 导入组件：首先，你需要在你的页面或组件中导入 uni-list 和 uni-list-item 组件。例如：

  import uniList from '@/components/uni-list/uni-list.vue';
  import uniListItem from '@/components/uni-list-item/uni-list-item.vue';

  然后在页面的 components 选项中注册这些组件：

  export default {
      components: {
          uniList,
          uniListItem
      }
  }

• 使用组件：在页面的模板中使用 uni-list 和 uni-list-item 来构建列表：

  <template>
    <uni-list>
      <uni-list-item title="列表项标题"></uni-list-item>
      <uni-list-item :disabled="true" title="禁用的列表项"></uni-list-item>
    </uni-list>
  </template>

2. 多行内容显示

• 设置 note 属性：可以在 uni-list-item 中设置 note 属性来显示第二行的描述文本信息：

  <uni-list-item title="列表项标题" note="列表项描述信息"></uni-list-item>

3. 右侧显示角标、switch

• 设置 show-badge 和 show-switch 属性：可以在 uni-list-item 中设置 show-badge 属性来显示角标内容，设置 show-switch 属性来显示 switch 开关：

  <uni-list-item title="列表右侧显示角标" :show-badge="true" badge-text="12"></uni-list-item>
  <uni-list-item title="列表右侧显示 switch" :show-switch="true" @switchChange="switchChange"></uni-list-item>

4. 左侧显示略缩图、图标

• 设置 thumb 和 show-extra-icon 属性：可以在 uni-list-item 中设置 thumb 属性来显示左侧略缩图，设置 show-extra-icon 属性并指定 extra-icon 来在左侧显示图标：

  <uni-list-item thumb="路径/图片.png" show-extra-icon :extra-icon="{color: '#4cd964', size: '22', type: 'spinner'}"></uni-list-item>

5. 事件和插槽

• 事件：uni-list-item 支持 click 和 switchChange 事件，分别用于点击列表项和开关状态改变时触发。

• 插槽：uni-list-item 提供了 header、body、footer 三个插槽，用于自定义列表项的内容：

  <uni-list-item>
    <template v-slot:header>
      <!-- 自定义头部内容 -->
    </template>
    <template v-slot:body>
      <!-- 自定义主体内容 -->
    </template>
    <template v-slot:footer>
      <!-- 自定义底部内容 -->
    </template>
  </uni-list-item>

以上就是 uni-list 插件的基本使用方法，你可以根据项目需求进行相应的调整和扩展。