## 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](https://ext.dcloud.net.cn/plugin?id=29)
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ,请自行手动安装
> - 组件内部依赖 `'uni-icons'` 、`uni-badge` 组件
> - `uni-list` 和 `uni-list-item` 需要配套使用,暂不支持单独使用 `uni-list-item`
> - 只有开启点击反馈后,会有点击选中效果
> - 使用插槽时,可以完全自定义内容
> - note 、rightText 属性暂时没做限制,不支持文字溢出隐藏,使用时应该控制长度显示或通过默认插槽自行扩展
> - 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式,开启方式: 详情 --> 项目配置 --> 启用 component2 编译
> - 如果需要修改 `switch`、`badge` 样式,请使用插槽自定义
> - 在 `HBuilderX` 低版本中,可能会出现组件显示 `undefined` 的问题,请升级最新的 `HBuilderX` 或者 `cli`
> - 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
### 基本用法
- 设置 `title` 属性,可以显示列表标题
- 设置 `disabled` 属性,可以禁用当前项
```html
<uni-list>
<uni-list-item title="列表文字" ></uni-list-item>
<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
</uni-list>
```
### 多行内容显示
- 设置 `note` 属性 ,可以在第二行显示描述文本信息
```html
<uni-list>
<uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
</uni-list>
```
### 右侧显示角标、switch
- 设置 `show-badge` 属性 ,可以显示角标内容
- 设置 `show-switch` 属性,可以显示 switch 开关
```html
<uni-list>
<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>
</uni-list>
```
### 左侧显示略缩图、图标
- 设置 `thumb` 属性 ,可以在列表左侧显示略缩图
- 设置 `show-extra-icon` 属性,并指定 `extra-icon` 可以在左侧显示图标
```html
<uni-list>
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size="lg" rightText="右侧文字"></uni-list-item>
<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" ></uni-list-item>
</uni-list>
```
### 开启点击反馈和右侧箭头
- 设置 `clickable` 为 `true` ,则表示这是一个可点击的列表,会默认给一个点击效果,并可以监听 `click` 事件
- 设置 `link` 属性,会自动开启点击反馈,并给列表右侧添加一个箭头
- 设置 `to` 属性,可以跳转页面,`link` 的值表示跳转方式,如果不指定,默认为 `navigateTo`
```html
<uni-list>
<uni-list-item title="开启点击反馈" clickable @click="onClick" ></uni-list-item>
<uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
</uni-list>
```
### 聊天列表示例
- 设置 `clickable` 为 `true` ,则表示这是一个可点击的列表,会默认给一个点击效果,并可以监听 `click` 事件
- 设置 `link` 属性,会自动开启点击反馈,`link` 的值表示跳转方式,如果不指定,默认为 `navigateTo`
- 设置 `to` 属性,可以跳转页面
- `time` 属性,通常会设置成时间显示,但是这个属性不仅仅可以设置时间,你可以传入任何文本,注意文本长度可能会影响显示
- `avatar` 和 `avatarList` 属性同时只会有一个生效,同时设置的话,`avatarList` 属性的长度大于1 ,`avatar` 属性将失效
- 可以通过默认插槽自定义列表右侧内容
```html
<uni-list>
<uni-list :border="true">
<!-- 显示圆形头像 -->
<uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" ></uni-list-chat>
<!-- 右侧带角标 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12" :badge-style="{backgroundColor:'#FF80AB'}"></uni-list-chat>
<!-- 头像显示圆点 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
<!-- 头像显示角标 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat>
<!-- 显示多头像 -->
<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
<!-- 自定义右侧内容 -->
<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot">
<view class="chat-custom-right">
<text class="chat-custom-text">刚刚</text>
<!-- 需要使用 uni-icons 请自行引入 -->
<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
</view>
</uni-list-chat>
</uni-list>
</uni-list>
```
```javascript
export default {
components: {}
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
基于uniapp开发的,前后端分离项目,可发布为小程序,或者发布为app,或者发布为wap端H5。 功能实现了,医院内项目的预约,在线付款,到门店进行项目检查,,其实也可以理解为, 就是一个电商应用,可把产品更改为水果,服饰衣服,奶茶,快餐,外卖等。。 至于下单页面只要把屏蔽预约人信息就可以,里面有添加地址的功能,管理收货地址。 所以该程序,基于uniapp开发,实际系统属于电商类,至于想怎么用,后台发布对应的产品就可以。 代码简单,没有过多深层封装,易于新人学习,容易上手。 学习小程序怎么授权登陆,学习uniapp的框架语法,事件绑定,跟服务端的交互API请求等 开发者wx:lamp366
资源推荐
资源详情
资源评论
收起资源包目录
uniapp小程序应用医院预约小型电商系统外卖系统加后端PHP接口服务完整项目,可打包H5及app (1185个子文件)
004be732b58d0643e5687002daaef50c08272f 187B
036c92c31d7474681ec28cf02428776027c89b 981B
038dca4a21a2e0e4fbe9f96e44d9da8093b117 178B
03a4a01faaf3bc8e9c47cd428e75d5623bd2b5 194B
03c1a2ad9d82c52c53f21119a01098e7a71a69 980B
04d0bb5a0d2ce855b5f09fee032655fd40041c 197B
050712e8afafaafe22cd4973ac3a0df7a46b7d 1KB
087fe3b107919b3134dda24cea11de064458c4 2KB
08a6bc7c9b592ed6c80a5e31eca0ed7e3e8cf5 174B
08c5e731208fdf6d36273acf91ab2e1165bdbb 116B
0a411146df552b542e0e2fb6d5454fa5840d16 54B
0ad118b2cab95b970cfd9e3f4a31d842e2e3a8 524B
0bf106d308e7494842f4a4521435832a2b88ab 3KB
0cb2e3c7c6439e8ca76c9d3975a8ea7739dbe3 651B
0d0af6889becbe6d04df12071f1a50403c9ab0 2KB
0e574f778d1f867adc73ec83e381b18b25b43c 48B
0f30ff153cc0fa31ef8d8b987328c60e64941e 146B
0f8ae83475dab781bae0910e2781af470c76ee 2KB
103052861c20c272ddd7beba1d9f39b577a1be 633B
12d4c4adf2e80d9e444dd499b01d704c6e9e7f 4KB
130e34688d6fe33c28cd731c6bc57b0a530b91 53B
135d96a7c0a036eef1b54b33b709a2d5b51b05 175B
1378715923583cb2f35f09f269f97696f485ef 193B
143f475cc9dc70c881197d8e27231961291712 680B
147378746871f1397eb7b4f32c917279a4f983 495B
15ba1f5a6c5128253f56998ef23b4b55d22b8e 429B
16a75c486db9c127db6c1b3d6c2c309ac02850 275B
17b233f16fd646c7bcb26ac0e505026adb925d 54B
17d030324151436eb532aaa6591bcaa81a3f6e 2KB
1b31776496ae411101b454d6d3741d59d21ad6 5KB
1b569b989a67ea74817f76bf730d271ab479a1 3KB
1c8a2b46cb9cc2166c3f056195432125806764 53B
1f7f6b0cb4a24a4969de9c6af5a21a32c3e373 1KB
1fb21bd5018b7fcaf2bb0f23385e13bd793787 272B
20d69f62826eaa80dc5f324591dd0436486ad9 427B
228261a659b0c8379dd71bb5f79a863ed357f7 886B
22c7789b6e82548e161715647dac03178208e9 46B
236905edf64514753dc0b2d36e8ecf1c47d0ea 149B
239a791d264fd93050c4cec2756a2f51eaadcd 273B
24a8e58b0c0504c556bb02c6114f1aac2d46f4 150B
255c5a553a81004452c0641c60347b85d9be16 901B
2584c06828670fdbc08e1121d02fa3a77b043b 3KB
266f4835eb945d576d04fa5dc52ee32c9dd330 855B
26a3f8f813d8d8f70e2655b4d0ad0f6d0fcbb8 940B
28437a4f419a5e4ad306cb3bba862b594534e2 496B
2869092c92761bf77f6b05a93c1ebf4c2f8eb6 845B
2926e6440103b2d28202a69332090419f88784 234B
2a09d99369afef90d41a0658d7de201cbb2484 85KB
2a8af4a36d0f8f130b34e85b846d291e71c5ab 939B
2b1d4a5a624880bc3ff5f75fa0854f3e32800c 89B
2bee05932854f33c5777bf5a9098a67baf629d 150B
2c10b8a52c220770bf0fe388c23050fcd8aabf 5KB
2c4903caa73162473e7aa53d26d0fcda829648 5KB
31a4046eb2a349ddec8f2f00d0c304e2401841 430B
31d38919d37ead041dba92f573e2fff9b23a20 116B
3232e0d503a99e7a33b9d00e7a8c5739e0701f 1KB
3383b1aec0de8852e7f4db30dd06f07813d953 1KB
33c0ebcd21034e760df206b784bd6230817d6d 115B
33c400adf31bfbcd35c9dea6d09a64ab31aee2 299B
342c5ff61c80aa8a51a560e25c8b585590f882 429B
34f4359a1c70e2c4d7573d4b815808ee301a71 46B
3571f8a56d0e2395e2ac4ef0c01244a706c6ec 856B
35f921b674453d7e0fe2e025051ce48efbe0f5 178B
36959fc4ff6ca10228c27d57b2ec8155473c59 6KB
38bf4ae39abca524b1bb965f7f226d74e94165 47B
3b69cfe7d206107269d4eacc1e8ce9eecae9e1 299B
3c15f3e49afc2d25a85096036cec101138e4bf 941B
3cd61adab6e89c2605d7d24a3094916cb88725 53B
3cf2c8464b860497444e49dd04b3477c8aa493 55B
3e531ca8275f02f520d733f52044c167a21a2f 7KB
3f64d1ad0c94122b75545f0a8a09d9ecd25317 216B
3fc4ab22a23e99d44565ef8b301d3cb1355d3c 2KB
41353e81e1689a02c6d509a247ea23470a3418 161B
4339a0845b6368b59ec40c587d63a822fb0cf4 968B
43824fc4ff3bff2cb5bc63666fb366c54d219b 89B
43b16e43d78bb41efbada640d7b594c36742f7 482B
43bc63b95585d204a502f1829e84a058d47037 315KB
4432841bd92c8a6181ef5ec3f85012eaa8dc99 56B
45780e5aba015865d263aecdfd2a2c627d857b 429B
45b64392b36e867ecd035f58b9c74b6a297805 54B
46996b1f2271d03d35f9f288514812feacdb6d 5KB
4796b972b8ca16c7deea3b803d1e2d1bea1fe2 947B
47b0b7b60a824d1ebd8504aef0d3371937ee72 234B
480a748af6da9fb73c5e4d79bd9244f814807a 229B
4866b2584db3d256f35a76dcd8234eb2707fc2 88B
48c1bf113917312df933f3f714577140ad87eb 88B
4a17b128b489c79754177b1e4c9f4f572f6ba0 191B
4a781f806d9c943da0eea37f8b1c96fffea7b3 2KB
4f87ba3d2973fb2e8b9872d96926ebd003a108 1KB
520f89f0d4b5405c524d03848d0921b069a090 857B
527ade6983eb7d962e886b83009840f0eb030e 299B
546bc92eb68fd4f6511e1747be1738e2990fcb 272B
56c83647a09a772dd02c3fd6b142c750ea62f6 3KB
5771915f1db6123667bd2167e8a24544730f8e 177B
57beaf9083dc6609edb6d2a80e704d18dee55b 1KB
58fa86f5a2fb2beeac94f8a50c96012bb9820d 2KB
5a13147b15c9aa519caab6fff5d4453b4362d2 89B
5a9a7fab079f64a3a260b8d89d5e4f4b57e74b 234B
5b226ea2162593020fbe5216b718714a328d6f 7KB
5c47391f2136334ed4ab945bd0e863c9934def 493B
共 1185 条
- 1
- 2
- 3
- 4
- 5
- 6
- 12
资源评论
kevin.liu
- 粉丝: 10
- 资源: 6
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 毕设和企业适用springboot企业数据智能分析平台类及企业创新研发平台源码+论文+视频.zip
- 毕设和企业适用springboot企业数据智能分析平台类及企业财务管理系统源码+论文+视频.zip
- 毕设和企业适用springboot企业数据智能分析平台类及企业管理智能化平台源码+论文+视频.zip
- 毕设和企业适用springboot企业数据智能分析平台类及汽车管理平台源码+论文+视频.zip
- 毕设和企业适用springboot企业数据智能分析平台类及商业数据管理系统源码+论文+视频.zip
- 毕设和企业适用springboot企业数据智能分析平台类及社交媒体平台源码+论文+视频.zip
- 毕设和企业适用springboot企业数据智能分析平台类及市场营销自动化平台源码+论文+视频.zip
- 毕设和企业适用springboot企业数据智能分析平台类及数据智能化平台源码+论文+视频.zip
- 毕设和企业适用springboot企业数据智能分析平台类及数据可视化平台源码+论文+视频.zip
- 毕设和企业适用springboot企业数据智能分析平台类及投票平台源码+论文+视频.zip
- 毕设和企业适用springboot企业数据智能分析平台类及实时通信平台源码+论文+视频.zip
- 毕设和企业适用springboot企业数据智能分析平台类及视频分析平台源码+论文+视频.zip
- 毕设和企业适用springboot企业数据智能分析平台类及网络安全防护平台源码+论文+视频.zip
- 毕设和企业适用springboot企业数据智能分析平台类及招聘管理平台源码+论文+视频.zip
- 毕设和企业适用springboot企业数据智能分析平台类及云计算资源管理平台源码+论文+视频.zip
- 毕设和企业适用springboot企业数据智能分析平台类及资产管理平台源码+论文+视频.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功