更新记录
1.2.15(2025-01-08) 下载此版本
- 修复 示例中过期图片地址
1.2.14(2023-04-14) 下载此版本
- 优化 uni-list-chat 具名插槽
header
非app端套一层元素,方便使用时通过外层元素定位实现样式修改
1.2.13(2023-03-03) 下载此版本
- uni-list-chat 新增 支持具名插槽
header
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue app-nvue | × | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
List 列表
组件名:uni-list 代码块:
uList
、uListItem
关联组件:uni-list-item
、uni-badge
、uni-icons
、uni-list-chat
、uni-list-ad
List 列表组件,包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。
在vue页面里,它默认使用页面级滚动。在app-nvue页面里,它默认使用原生list组件滚动。这样的长列表,在滚动出屏幕外后,系统会回收不可见区域的渲染内存资源,不会造成滚动越长手机越卡的问题。
uni-list组件是父容器,里面的核心是uni-list-item子组件,它代表列表中的一个可重复行,子组件可以无限循环。
uni-list-item有很多风格,uni-list-item组件通过内置的属性,满足一些常用的场景。当内置属性不满足需求时,可以通过扩展插槽来自定义列表内容。
内置属性可以覆盖的场景包括:导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。
涉及很多大图或丰富内容的列表,比如类今日头条的新闻列表、类淘宝的电商列表,需要通过扩展插槽实现。
下文均有样例给出。
uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件:uni-load-more
点击查看详细文档
如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
基于uni-list扩展的页面模板
通过扩展插槽,可实现多种常见样式的列表
新闻列表类
- 云端一体混合布局:https://ext.dcloud.net.cn/plugin?id=2546
- 云端一体垂直布局,大图模式:https://ext.dcloud.net.cn/plugin?id=2583
- 云端一体垂直布局,多行图文混排:https://ext.dcloud.net.cn/plugin?id=2584
- 云端一体垂直布局,多图模式:https://ext.dcloud.net.cn/plugin?id=2585
- 云端一体水平布局,左图右文:https://ext.dcloud.net.cn/plugin?id=2586
- 云端一体水平布局,左文右图:https://ext.dcloud.net.cn/plugin?id=2587
- 云端一体垂直布局,无图模式,主标题+副标题:https://ext.dcloud.net.cn/plugin?id=2588
商品列表类
- 云端一体列表/宫格视图互切:https://ext.dcloud.net.cn/plugin?id=2651
- 云端一体列表(宫格模式):https://ext.dcloud.net.cn/plugin?id=2671
- 云端一体列表(列表模式):https://ext.dcloud.net.cn/plugin?id=2672