## 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'
},
没有合适的资源?快使用搜索试试~ 我知道了~
微信小程序开发练手项目:黑马优购小程序源码
共2000个文件
json:111个
md:95个
vue:90个
需积分: 0 16 下载量 99 浏览量
2023-12-07
23:02:32
上传
评论
收藏 5.5MB ZIP 举报
温馨提示
黑马优购 微信小程序开发
资源推荐
资源详情
资源评论
收起资源包目录
微信小程序开发练手项目:黑马优购小程序源码 (2000个子文件)
004716dae283e8a8b5d44a120afae50f99a8f7 144B
004b3838b0dd0d20765e5d37029b9a4da60eef 45B
004df380d59df6dde952a0606c4f23d9184d1d 57B
00733544d0c6cee75d1b3a7c2dde9ae235a950 36B
0078a3f00590e6f9891ac1d2695f292cf2c15b 526B
007ece1c5d394fdad7ff711c96759d26309b11 131B
007f3ee3e9bc82b9a9694031da1d0488636bbd 91B
00a08c2bfcfe6aa827bcbcd02d7b2af60ea9ed 800B
00ad846fbc7b15ecd68abe280eb7711ce1f6a1 141B
00b66cd4c9eb90ac73fa6df20ba018362be710 365B
01166cf0c3e244d55afef7167051668d2cc6a1 425B
0125aab8c780a3dcbeb3a05c926b778002eaa6 105B
01a83148de879232659533c8c079b149a83cec 141B
01b505a404c548d09703736fa7f568cbb727a8 56B
01eb05c1488fe484cc4e158539bf42b887e360 84B
023f8d663afb461607efb53fe72740824be0c3 62B
024fdf847c21e4385061cf0e5e62e9e73f9e5d 492B
025aff24698b32ce2b67302321151e0c675cdb 4KB
02c2e42836fc26697d12b1286d9215afd4fd12 46B
02dfc990a464549fefe3b3942f37a5b354586d 3KB
03020c89968b51c84e768ee41711d873162251 526B
03446aaf158dc8c60f6c253d81488b014d6203 3KB
036f5956b0dc6ea9e354966d99283c2deb13d6 47B
038435821c97fde70bbdc22ff35fe4aaa2be55 29B
03c21f07836bf697076c38bf07deadcfc2283b 107B
03da8c77c4f3efd8312ffcf7e1b25df2d8527e 5KB
03f1d57a158042a6c3f0ce254569f37447e845 577B
03fb4c68b162015583ba8131c105ef05eb5c0f 203B
041823eaefa3f42c5d5c21879cffb27876ec79 3KB
0441dfa8eac862f905cfb129eeb5dbf173a839 6KB
04471d9a429f614c123be79a01c45e67b5536c 143B
047189765f6b898a3461cae332bf6819779ddc 46B
0493e179e46aed8f7621e68c57d540400ccf99 113B
04e32050be2157cea7d8fcfb35b3f1f3ebe665 51B
04e50324df9ba4b62af1c0ce9f549d7269355c 729B
04f5699696f31dca2157763ad1f81cc83cfeaa 82B
0556ba4d996bec726701c51f1e8d555b8a47e5 784B
056e4c60574559b2833e42b3ed8c0fc4cf3d73 789B
05a1385578cd493d1e2d18c49ef0320b6dd832 52B
05b07a7e515620ccc347a32f7917947440b41a 265KB
05b260bfcbcce0b0a52915f46a70a8ca1b62d7 194B
05b5f1abc02ab4ccfff4f04bbff6e546972686 3KB
05be991e203cb987b256a22c329b6a24a14680 4KB
05c3ff58e893fe4d57064cc8119418392a8539 801B
05d792d8aeb818bbdfb0ec87526d11093cca19 4KB
05e4d56361e0ade1dc478d4c4ff1b293569ffd 134B
0610398407757eec5491d856eabf6b87da1762 144B
062371d4c3b1e6a8367e1f2b7f250e023005e1 153B
062d42b29f02edc623834720ef88437b6a3277 857B
0638fffedf18539b2eb8fd271a82b1cc870a48 121B
0658b627965e41fb5ae44fc452f3ede0d16af4 96B
065d491e0979d91c9e0acd296a844479b1ce3a 54B
0667d8d9db90af40acde3bc6c0c29320b0ab09 45B
06fb90ec753a5da68690a2a8a4228ea6905801 494B
06fe7226c1887a923dff9b5eb0fb70f8c002e3 46B
07030c6fe8f664ce01d525846e88e7bed32d68 5KB
071a86d34b93cc288504b5c2d8e00eabacb2aa 143B
077552e6df7b834f67777e1d828937d8d48e22 4KB
07ba5ba4a1826bafe5a167e22e1cd3b357a429 3KB
07c77517ac8dcf381dcbabcfe42d01bd480b8d 624B
07fc18b8e11d03ba16c1852631f29868d1cac4 525B
0810fef2188969664da07e1ffb66093ec6d273 443B
08309f2c7fe6d7346b33dea38aa8ccfa8df282 120B
083a5357aa7576eedcf55fe1b6d0caedace0cd 81B
08c79189e9a794a229fae07cb84ef1bcbdef32 303B
0948c26744deedafdb72d9c5292e05d3e8f43f 147B
094c9244be90cbfedfd47693657987347a98ff 56B
09d468a9e7d3e793a5c8c242b4b87585042e59 53B
09e941a51c6ad5abc26dec2b504541bc417228 350B
09fffad41a8e5085a3853da762b5fcf95b6a01 114B
0a006735c018c46362c3da96379a364e56981d 59B
0a5e6ead335d41e70b2c6d307fe4bba0f9728b 141B
0a811b0633cb9134cafb8565e30f8b6f537f01 51B
0a920834ab90f29f5fd4a18fb912b305c961a5 141B
0ab05758b886f26e4bd7ffea0e7d00519f64c2 156B
0ac0e447b1f5684895b5d30eab027340709f75 200B
0ae959df2df01566cd9f7642b5c0a20ecb5989 794B
0b31f8b07bdda559396bd6bd676d3fc1c2fe89 114B
0b5385fe742730dbee00335ebbb551c1cc9b28 163B
0b6ddcbea884ca19645475d5f3bd1f7ff85e57 1KB
0be497bc4b6f110a4b4a119b371f6101b51ee4 173B
0bfb123ba811240a23883c589557cced22af97 446B
0c2521dabc51131dd2f2303b643cdce827377f 56B
0c721d9272130022aacdb7dee39f465c98dea2 4KB
0c7c35dc5e741d1fd6e8a06f4dc593c1df3829 51B
0d209d9d075c78ddf380db11f30dab8908dfbd 336B
0d34bf5377c3ea14e00d6ebbc1f908fefcea9d 51B
0d4accd5c657104e13fdafcc88c160692621eb 143B
0d5597e7a0b8dcdea64ef0c1c3f4d69e9522f8 2KB
0d7fc9b0b28e86945e3b4b4a021ea7474ab41a 1KB
0d868d9ec5d701cae043d2567dd1e82b3cc58c 78B
0d8c2b8d930e9f69bb04ca3460f4af4e785f28 138B
0da14f8bf288f50b22eead094a5a3e65820b63 47B
0da4a6d721b22548bc4437120f188317781706 46B
0df4d4bc6c439af88c0a6f587e7f3bbe0e0222 56B
0e04d3b20990608a5ac836d002f5c61e5398e3 83B
0e2dbfa62b0e291b2c0b734e8a3277a9296f58 138B
0e4482cfa4ef896997be64541f47584b00798b 161B
0e465315aba8cbf5954b5fc2ace110865976c8 3KB
0e57426e7f31044ed0b8ed854caf67b40ba371 494B
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
南丶七
- 粉丝: 47
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功