融云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 插件的基本使用方法，你可以根据项目需求进行相应的调整和扩展。