## 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: {},
data() {
return {
avatarList: [{
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
},
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
利用uniapp编程语言制作新闻app小程序 (1054个子文件)
01dd7c041a63c5d6550965349472c1f48e8025 2KB
0c954b10513598b77876d89b19def6b4032999 155B
0f1d43a346007be34d2ec8c16e46913cc83bb2 40B
10a4aeb9e662e3fa2040567928acfe6dce0fd9 208KB
179d0334ebb936cc6c27c510375f91f23b2302 771B
17a12ac1b293de74cc0952e0ad7f3f38a776bb 98B
1b8dd2366aa00560268559043af4772af38b2b 983B
1cc2fc336194613d19af7b709b23a2265e702f 3KB
1cebb9841e428d413f9b2eef7e0ec0d7f55dd5 113B
23f45765617d79ca4afb1c9a864ef2a03d4bae 1KB
30cc042d04cb4609d9d85d0ad948b7d32f75a7 100B
334db59bb99ac31a2afb06c806c3ef0f630a07 4KB
3e6c5f900571fa0b66ca6f0ff2aa4e92580fb2 169B
3eba0120a62048cf679f1fc2980f4e2d8268c4 176B
420c939c8dba43c250d5fcefc7c4018bde8e57 2KB
4e90d82478f18a59401f2d31000dc6b834346e 133B
4fbab4a2791fd0e406de4905ad8abe79f9cbad 398B
509be377994f36e95f37908dc45380b0da47ea 2KB
549c09a0f8641c1a6b5c566c4d2e3dca8f9fb4 305B
5b29748c62ccf8ee238390b6ee075dfcd6fbb1 107B
6236dfa8070d35749aea2c5a30c953d202b734 2KB
62480132942d77bbdf0f72e1d7933d679130d9 735B
63342eea84a37bcf8fd9c26b1cc42a0e1e1aec 546B
6341b90e634557f5697629000d4cb1689b751d 421B
64332a19cfe288d28f6119137609d74e25c4f4 8KB
6fc79ffc3231155188a6fe3cdb4ab613889694 428B
75fda7158c880829b477554bfcc3d7ba027fc9 214B
772470312ee5c4a266af4cf5edcca12d13d371 2KB
775c652c7d9b305c24c4d9228ac1285cb1851a 224KB
87324648b43c71da4f8967fe779b61e061ba8e 833B
91e1dfc786f832ac56cf39a5e236316a777bc1 119KB
9697462c3eb75124c6fe829f95958d0ab071ab 131B
9aabb386f072fc426b969e7cd3e569964b2619 2KB
9bacd6f9b4a70aeada2e8034d6eac878fb2ed3 109B
9e1aaa2df78868358ce6bba618ed0c9d0e635d 110B
9f6c05444ea74d10f292fe1a2c4b17ff31c4eb 65KB
a5e1690ddee3b7a9a5a55be9f88948a9dee5a8 1KB
ad7438722ebe1fe75b0bbeb0913acbda00d5f6 3KB
b776e302cc2e8a6f864e47b8b765b39816e6d9 63B
ba0d9c551a7f43dfa1cfa720f1206050c459e3 471KB
c09c3c1f0b02eeaac0bb8715ad19e0780d5673 530B
c36f187970196f151b9f9189242757c5a9595c 3KB
c8ab9f22d18d5d605503eda314e5d2a31fdfc0 1KB
cff424a7084e91b734746769c4e62e77450123 25B
config 112B
uniicons.css 8KB
customicons.css 307B
customicons.css 307B
da536c0b2bf4bcda48c6747195a44af3b51503 5KB
ddf5091165ca05c77f00db738cbe03fd4035bd 1KB
description 73B
ea590c816e52f41801770b5ef0be21624f726e 148B
ec40bf205c6b5ac96681684611b561f297313e 144B
ed5fa8c975d5ac3e7f8e619d8a71b518160333 186B
exclude 113B
fe58c620c7c54b6d8b95fe70f1ee70fa8414dc 2KB
.gitignore 159B
HEAD 183B
HEAD 23B
index.html 672B
index 4KB
touxiang.jpg 65KB
touxiang.jpg 65KB
vendor.js 1.01MB
moment-with-locales.js 607KB
locales.js 438KB
moment-with-locales.min.js 360KB
locales.min.js 303KB
moment.js 171KB
moment.js 151KB
moment.min.js 57KB
uni-forms-item.js 48KB
uni-forms.js 46KB
uni-easyinput.js 46KB
denglu.js 38KB
Signup.js 37KB
Detail.js 37KB
Comment.js 37KB
user-edit.js 37KB
my.js 35KB
Home.js 35KB
uni-section.js 35KB
uni-icons.js 34KB
Explore.js 30KB
icons.js 26KB
main.js 24KB
calendar.js 24KB
collection.js 20KB
uni-data-picker.js 14KB
day-of-week.js 13KB
runtime.js 12KB
validate.js 12KB
util.js 10KB
month.js 10KB
ru.js 9KB
util.js 9KB
ru.js 8KB
ru.js 8KB
from-string.js 8KB
utils.js 8KB
共 1054 条
- 1
- 2
- 3
- 4
- 5
- 6
- 11
资源评论
沙砾与贝壳
- 粉丝: 16
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功