更新记录

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 代码块: uListuListItem 关联组件:uni-list-itemuni-badgeuni-iconsuni-list-chatuni-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扩展的页面模板

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

新闻列表类

  1. 云端一体混合布局:https://ext.dcloud.net.cn/plugin?id=2546
  2. 云端一体垂直布局,大图模式:https://ext.dcloud.net.cn/plugin?id=2583
  3. 云端一体垂直布局,多行图文混排:https://ext.dcloud.net.cn/plugin?id=2584
  4. 云端一体垂直布局,多图模式:https://ext.dcloud.net.cn/plugin?id=2585
  5. 云端一体水平布局,左图右文:https://ext.dcloud.net.cn/plugin?id=2586
  6. 云端一体水平布局,左文右图:https://ext.dcloud.net.cn/plugin?id=2587
  7. 云端一体垂直布局,无图模式,主标题+副标题:https://ext.dcloud.net.cn/plugin?id=2588

商品列表类

  1. 云端一体列表/宫格视图互切:https://ext.dcloud.net.cn/plugin?id=2651
  2. 云端一体列表(宫格模式):https://ext.dcloud.net.cn/plugin?id=2671
  3. 云端一体列表(列表模式):https://ext.dcloud.net.cn/plugin?id=2672

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

uni-list 列表(以下简称软件)源码使用许可协议

2022年10月

本许可协议,是数字天堂(北京)网络技术有限公司(以下简称DCloud)对其所拥有著作权的“软件”,提供的使用许可协议。

您对“软件”的复制、使用、修改及分发受本许可协议的条款的约束,如您不接受本协议,则不能使用、复制、修改本软件。

授权许可范围

a) 授予您永久性的、全球性的、免费的、非独占的、不可撤销的本软件的源码使用许可,您可以使用这些源码制作自己的应用。

b) 您只能在DCloud产品体系内使用本软件及其源码。您不能将源码修改后运行在DCloud产品体系之外的环境,比如客户端脱离uni-app,或服务端脱离uniCloud(如涉及uniCloud)。

c) DCloud未向您授权商标使用许可。您在根据本软件源码制作自己的应用时,需以自己的名义发布软件,而不是以DCloud名义发布。

d) 本协议不构成代理关系。

DCloud的责任限制 “软件”在提供时不带任何明示或默示的担保。在任何情况下,DCloud不对任何人因使用“软件”而引发的任何直接或间接损失承担责任,不论因何种原因导致或者基于何种法律理论,即使其曾被建议有此种损失的可能性。

您的责任限制

a) 您需要在授权许可范围内使用软件。

b) 您在分发自己的应用时,不得侵犯DCloud商标和名誉权利。

c) 您不得进行破解、反编译、套壳等侵害DCloud知识产权的行为。您不得利用DCloud系统漏洞谋利或侵害DCloud利益,如您发现DCloud系统漏洞应第一时间通知DCloud。您不得进行攻击DCloud的服务器、网络等妨碍DCloud运营的行为。未经书面许可,您不得利用DCloud的产品进行与DCloud争夺开发者的行为。

d) 如您违反本许可协议,需承担因此给DCloud造成的损失。

本协议签订地点为中华人民共和国北京市海淀区。

根据发展,DCloud可能会对本协议进行修改。修改时,DCloud会在产品或者网页中显著的位置发布相关信息以便及时通知到用户。如果您选择继续使用本框架,即表示您同意接受这些修改。

条款结束

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问