## 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 h5 和微信小程序 前端空白项目 demo (1299个子文件)
007f3ee3e9bc82b9a9694031da1d0488636bbd 91B
00a08c2bfcfe6aa827bcbcd02d7b2af60ea9ed 800B
01166cf0c3e244d55afef7167051668d2cc6a1 425B
01b505a404c548d09703736fa7f568cbb727a8 56B
024fdf847c21e4385061cf0e5e62e9e73f9e5d 492B
02dfc990a464549fefe3b3942f37a5b354586d 3KB
0387e9ed861c07b20e73fd92a48dab40b179e2 1KB
03f1d57a158042a6c3f0ce254569f37447e845 577B
0428bb87c90b48771945ac6dd1e96d0004b159 413B
0441dfa8eac862f905cfb129eeb5dbf173a839 6KB
04e50324df9ba4b62af1c0ce9f549d7269355c 729B
0556ba4d996bec726701c51f1e8d555b8a47e5 784B
056e4c60574559b2833e42b3ed8c0fc4cf3d73 789B
05b5f1abc02ab4ccfff4f04bbff6e546972686 3KB
05c3ff58e893fe4d57064cc8119418392a8539 801B
062371d4c3b1e6a8367e1f2b7f250e023005e1 153B
062d42b29f02edc623834720ef88437b6a3277 857B
0759e0214562df0a0e69aca7760e288b68366b 52B
07782abfc7881a73d3f47a00b761c183e06ff9 2KB
083a5357aa7576eedcf55fe1b6d0caedace0cd 81B
08c79189e9a794a229fae07cb84ef1bcbdef32 303B
09e941a51c6ad5abc26dec2b504541bc417228 350B
0a006735c018c46362c3da96379a364e56981d 59B
0ae959df2df01566cd9f7642b5c0a20ecb5989 794B
0b5385fe742730dbee00335ebbb551c1cc9b28 163B
0b7a68856166051d6ef69231bb014407610390 2KB
0d4accd5c657104e13fdafcc88c160692621eb 143B
0d502de4a95937b2ad49fc1064bbdce99c1ba4 499B
0d5597e7a0b8dcdea64ef0c1c3f4d69e9522f8 2KB
0d8a74f2b250c43d9daff3ccfbc7dc356380fb 86B
0df4d4bc6c439af88c0a6f587e7f3bbe0e0222 56B
0e4482cfa4ef896997be64541f47584b00798b 161B
0f0ef42509e579532cfeea9ffdec58334596b0 1KB
0f1581f4aa6ffe5bd75b169cb6ed6b6b03e4c2 81KB
0f50c42509df062143056d6694882eec0e0051 51B
0fddbd41a66d3548e486c791f401a3c4dba64b 93B
102ef901a64b32f260c0bacf1c28dbb0bd095f 51B
10765559837fc53344a6b311385b6fbea433d8 142B
111ee1016d1f9ef4eddf3bf5710c5fb50c8f6c 190B
11c2d259e313e6e34d6505b5cad2a5fe46136e 56B
128e17a88b3367ea68210293f28c177d54a117 784B
12c8a18826869135fcd625c47108457bbc5cbc 59B
12cee2b0acffa32b657e23688e6dbb7b489e3f 52B
12e83db025a2282cdee33077d28d1777e08ca0 62B
13baec982979a1aab770fab83ec02b805d7f81 1KB
14228564a9127f1bcc1740fb848174743ca3b2 4KB
1469716a21aa57d6fb8165cbbae421e5296dbe 802B
14b4deb2e23d7c33ad50d3ea32b6dbfbe00089 70B
14d270e79811f1996607b0e85029fde6182ad8 58B
154f63075f02814f9690866e02100ec8412d2e 56B
164273ee29445ea0963a9857f0189da1289b11 1KB
16687f75dfd6c0b100393d2cd5ebdb3d3373f0 54B
16b1755e81ac4ef774fa964c8f6c3bb0df7a5e 2KB
1748cd7182234e93d4f0ab8acc83e9dba15682 2KB
17d43a109d15d5bf4941b44184b8eb0570b8d2 1KB
18da54b79b83b87765fcd601d54b1ef7255476 161B
18df5f98f16057e6c04cfc7d5e26b304f53439 2KB
18f49c939b3ddec875b2e03bc0c9e1ff38aa11 6KB
1a55493222ba49e06d9504070817b864ca368d 3KB
1b3058072d3ffef55ceb1bf6d4d1b688063db7 301B
1b3519e3193ad779741a440eff927c418d199d 95B
1b87c970a56a7408f9946e55b4e3fade0bdd1e 456B
1bd06a0380527163901fc369ed810b8e25fc46 109B
1bf2a8aa37e29300655df1d9a20dad128d4638 55B
1c0321213a6b36b76a5b7d3714a988a6681c59 2KB
1ca6c678cb7e6a17ef5aeba2911783d6498a3d 60B
1e1d0c26917161378c32420f448695634b5036 60B
1e358b7c5bb3240b8108e44878eceb606b3825 4KB
1eb50723e0d30ce9e9860543d2bb2a7919558f 161B
1f8d9faf070f43c719519076af6a8b29424383 816B
1fdd3baff453befb41124804bb363ae034a9b1 749B
2023cc1b2fe099d7f56bd6d05e59dab03bc781 135B
207cde8fe77235fa82589979179741b9b4bb36 62B
20a9af9846fb9d972b894d6a099aed5ebde5fb 63B
2101893ecfc8b6e4efbfae5e4087500beabc44 230B
223634b276c0e49eccd8f8fc32352b4f75ba0b 54B
22a7140c6d7b3c4fb9a8f05602545bc268711b 3KB
230e9f9b8919f17ab537488b99ba8842bb7efe 1KB
23423def2bd93cd7a9abb30af49efbf3481694 118B
234ba1ce8b8fbfa52c3f08ba6c5847f1934807 285B
2488c321ad8a8e27463f04701cfab0ba9cef6e 441B
24cabef9864b567cecd6608a71f74c13bab45e 95B
2561141c8d852d19f7ef9170bde2e762539900 845B
25c32a265cf5c2664a4bee8d752bba1e7e28a2 602B
25ecd3a24dfd18bcd1ac72cf59cc3de3fcd799 1KB
262165345ff7aeb8bd34b1f5ff83aa5b88259f 314B
264c67eb60f25b3438f12332249b2166f8ebb8 519B
268115b8e20b1b1699076a94c619a8c5e51f4e 534B
26dfc2a0aa278106030819878efbd2d7a76c22 56B
2700b7300dada8bf505da1260f6b1664dc8bdb 162B
27b03f61fbe9f338dad1b6f1af8d2f5d004dc4 309B
29259df22d8f70b92d0e4a568aa5fb32c9fba2 533B
29bc23161e22ae49a3ef513dc7648569551d17 2KB
29c7a8d1c5b369768484ecb132dbd84a2fed4c 162B
2a5fc234fddbcdcc6ed598c30f6e603aa9b9f5 36KB
2a6a713728812444b55b6947b7da31f301f916 3KB
2af1794cb0d2d2731bbd46cc576c689abe24f4 148B
2bbe4ad75405804f5a4cff92cccd0bc2f1f795 94B
2c672331174b75f2d25f2bf6d918c9cd45063d 162B
2cd717af18cfec8b3265c267829b30cf334bc0 1KB
共 1299 条
- 1
- 2
- 3
- 4
- 5
- 6
- 13
资源评论
逆风优雅
- 粉丝: 6946
- 资源: 15
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功