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

 
  
  
  
 
 
 