## 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'
},
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
1、资源内容:基于SpringBoot+MyBatisPlus+Vue&Element实现微信小程序后台管理系统(源码+sql+说明文档).rar 2、适用人群:计算机,电子信息工程、数学等专业的学习者,作为“参考资料”参考学习使用。 3、解压说明:本资源需要电脑端使用WinRAR、7zip等解压工具进行解压,没有解压工具的自行百度下载即可。 4、免责声明:本资源作为“参考资料”而不是“定制需求”,代码只能作为参考,不能完全复制照搬。不一定能够满足所有人的需求,需要有一定的基础能够看懂代码,能够自行调试代码并解决报错,能够自行添加功能修改代码。由于作者大厂工作较忙,不提供答疑服务,如不存在资源缺失问题概不负责,谢谢理解。
资源推荐
资源详情
资源评论
收起资源包目录
基于SpringBoot+MyBatisPlus+Vue&Element实现微信小程序后台管理系统(源码+sql+说明文档).rar (2000个子文件)
editor.main.css 68KB
colorui.css 63KB
uniicons.css 8KB
iconfont.css 1KB
ie.html 23KB
index.html 5KB
index.html 5KB
index.html 4KB
login.html 2KB
callback.html 2KB
index.html 935B
PriceServiceTest.java 30KB
PriceServiceImpl.java 28KB
DataPermissionDatabaseInterceptorTest2.java 25KB
DataPermissionDatabaseInterceptor.java 24KB
TradeOrderServiceImpl.java 23KB
TradeAfterSaleServiceImpl.java 18KB
TradeOrderServiceTest.java 17KB
PayChannelServiceTest.java 16KB
OperateLogAspect.java 16KB
BpmTaskAssignRuleServiceImpl.java 16KB
ProductSpuServiceImplTest.java 15KB
BpmProcessInstanceServiceImpl.java 15KB
BpmTaskServiceImpl.java 14KB
TradeOrderConvert.java 14KB
BpmProcessDefinitionServiceImpl.java 13KB
GlobalExceptionHandler.java 13KB
TencentSmsClient.java 12KB
BpmModelServiceImpl.java 12KB
DeptDataPermissionRuleTest.java 11KB
DiscountActivityServiceImplTest.java 11KB
SeckillActivityServiceImpl.java 10KB
AliyunSmsClientTest.java 10KB
RewardActivityServiceImplTest.java 10KB
TencentSmsClientTest.java 10KB
PayAppServiceTest.java 10KB
PayClientFactoryImplIntegrationTest.java 10KB
PayOrderServiceTest.java 10KB
WXLitePayClient.java 9KB
DiscountActivityServiceImpl.java 9KB
WXPubPayClient.java 9KB
BpmTaskAssignRuleServiceImplTest.java 9KB
PayRefundServiceTest.java 9KB
DeptDataPermissionRule.java 9KB
MpMaterialServiceImpl.java 9KB
ProductSkuServiceImpl.java 9KB
YudaoWebSecurityConfigurerAdapter.java 9KB
MpAutoReplyServiceImpl.java 9KB
WXNativePayClient.java 9KB
YudaoMQAutoConfiguration.java 9KB
PayOrderController.java 8KB
TradeCartServiceImpl.java 8KB
MpUserServiceImpl.java 8KB
BpmTaskConvert.java 8KB
AliyunSmsClient.java 8KB
PayMerchantServiceTest.java 8KB
TradeAfterSaleServiceTest.java 8KB
DataPermissionDatabaseInterceptorTest.java 8KB
CollectionUtils.java 8KB
MpMessageConvert.java 8KB
PayAppController.java 7KB
RewardActivityServiceImpl.java 7KB
SeckillActivityServiceImplTest.java 7KB
ProductSkuServiceTest.java 7KB
DefaultMpServiceFactory.java 7KB
SeckillTimeServiceImplTest.java 7KB
PriceCalculateRespDTO.java 7KB
ProductSpuServiceImpl.java 7KB
MpAccountServiceImpl.java 7KB
CouponTemplateServiceImplTest.java 7KB
MpMessageDO.java 7KB
YudaoSwaggerAutoConfiguration.java 6KB
YudaoTenantAutoConfiguration.java 6KB
CouponTemplateBaseVO.java 6KB
BpmModelConvert.java 6KB
MpDraftController.java 6KB
TradeOrderDO.java 6KB
OAuth2Client.java 6KB
MpMessageServiceImpl.java 6KB
MpMenuServiceImpl.java 6KB
ProductSpuDO.java 6KB
MpTagServiceImpl.java 6KB
ProductCategoryServiceImplTest.java 6KB
AlipayQrPayClientTest.java 6KB
MpFreePublishController.java 6KB
PayChannelController.java 5KB
BpmProcessInstanceConvert.java 5KB
TenantSecurityWebFilter.java 5KB
PayMerchantController.java 5KB
MpUtils.java 5KB
TradeAfterSaleController.java 5KB
BpmUserGroupServiceTest.java 5KB
AbstractAlipayClient.java 5KB
PayChannelMapperIntegrationTest.java 5KB
QueryWrapperX.java 5KB
MpOpenController.java 5KB
MpAutoReplyBaseVO.java 5KB
ProductPropertyValueServiceImpl.java 5KB
BpmFormServiceTest.java 5KB
ApiAccessLogFilter.java 5KB
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
- 无敌小蜥屹2023-06-05资源内容详实,描述详尽,解决了我的问题,受益匪浅,学到了。
- liuaku2023-08-29资源使用价值高,内容详实,给了我很多新想法,感谢大佬分享~
Matlab仿真实验室
- 粉丝: 2w+
- 资源: 2179
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功