uniapp扩展组件---uni-list

文章目录

• • 基本用法
  • 多行内容显示
  • 右侧显示角标、switch
  • 左侧显示略缩图、图标
  • 开启点击反馈和右侧箭头
  • 聊天列表示例

介绍：

组件名：uni-list

代码块： uList、uListItem 

关联组件：

uni-list-item、

uni-badge、

uni-icons、

uni-list-chat

点击下载&安装

文章内容

一、Api属性以及基础用法

点击下方查看：

查看uni-list  Api

基础用法：

属性

• 设置 title 属性，可以显示列表标题

• 设置 disabled 属性，可以禁用当前项

用法 

二、多行内容显示

属性

• 设置 note 属性 ，可以在第二行显示描述文本信息

用法 

三、右侧显示角标、switch

属性

• 设置 show-badge 属性 ，可以显示角标内容
• 设置 show-switch 属性，可以显示 switch 开关

用法 

四、左侧显示略缩图、图标

属性

• 设置 thumb 属性 ，可以在列表左侧显示略缩图
• 设置 show-extra-icon 属性，并指定 extra-icon 可以在左侧显示图标

用法 

五、开启点击反馈和右侧箭头

属性

• 设置 clickable 为 true ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 click 事件
• 设置 link 属性，会自动开启点击反馈，并给列表右侧添加一个箭头
• 设置 to 属性，可以跳转页面，link 的值表示跳转方式，如果不指定，默认为 navigateTo

用法 

六、聊天列表示例

使用uni-list-chat制作一个聊天列表

同时使用uni-list的switch控制显示

 扩展avatarList

头像组，格式为 [{url:''}]

会将你的所有突变拼接起来

例如：上面的练习

小结

通过扩展插槽，可实现多种常见样式的列表

新闻列表类

1. 云端一体混合布局：基于 uni-list 的云端一体新闻列表模板（混合布局） - DCloud 插件市场
2. 云端一体垂直布局，大图模式：基于 uni-list 的云端一体新闻列表模板（大图模式） - DCloud 插件市场
3. 云端一体垂直布局，多行图文混排：基于 uni-list 的云端一体新闻列表模板（图文混排） - DCloud 插件市场
4. 云端一体垂直布局，多图模式：基于 uni-list 的云端一体新闻列表模板（多图显示） - DCloud 插件市场
5. 云端一体水平布局，左图右文：基于 uni-list 的云端一体新闻列表模板（左图右文） - DCloud 插件市场
6. 云端一体水平布局，左文右图：基于 uni-list 的云端一体新闻列表模板（左文右图） - DCloud 插件市场
7. 云端一体垂直布局，无图模式，主标题+副标题：基于 uni-list 的云端一体新闻列表模板（无图显示） - DCloud 插件市场

商品列表类

1. 云端一体列表/宫格视图互切：基于 uni-list 的云端一体商品列表模板 - DCloud 插件市场
2. 云端一体列表（宫格模式）：基于 uni-list 的云端一体商品列表模板（宫格模式） - DCloud 插件市场
3. 云端一体列表（列表模式）：基于 uni-list 的云端一体商品列表模板（列表模式） - DCloud 插件市场

来源：

uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/component/uniui/uni-list.html