文章目录
基本用法多行内容显示右侧显示角标、switch左侧显示略缩图、图标开启点击反馈和右侧箭头聊天列表示例
介绍:
组件名:uni-list
代码块: uList、uListItem
关联组件:
uni-list-item、
uni-badge、
uni-icons、
uni-list-chat
点击下载&安装
文章内容
一、Api属性以及基础用法
点击下方查看:
查看uni-list Api
基础用法:
属性
设置 title 属性,可以显示列表标题 设置 disabled 属性,可以禁用当前项
用法
二、多行内容显示
属性
设置 note 属性 ,可以在第二行显示描述文本信息
用法
三、右侧显示角标、switch
属性
设置 show-badge 属性 ,可以显示角标内容设置 show-switch 属性,可以显示 switch 开关
用法
四、左侧显示略缩图、图标
属性
设置 thumb 属性 ,可以在列表左侧显示略缩图设置 show-extra-icon 属性,并指定 extra-icon 可以在左侧显示图标
用法
thumb-size="lg" rightText="右侧文字">
五、开启点击反馈和右侧箭头
属性
设置 clickable 为 true ,则表示这是一个可点击的列表,会默认给一个点击效果,并可以监听 click 事件设置 link 属性,会自动开启点击反馈,并给列表右侧添加一个箭头设置 to 属性,可以跳转页面,link 的值表示跳转方式,如果不指定,默认为 navigateTo
用法
六、聊天列表示例
使用uni-list-chat制作一个聊天列表
同时使用uni-list的switch控制显示
note="uni-list-item的内容" thumb="../../static/uni.png" thumbSize="lg" showBadge="true" right-text="2023年7月27日11:42:51" showArrow="true" link="reLaunch" to="../index/index"//需要跳转的页面 >
title="uni-list-chat的应用" showSwitch="true" switch-checked="true" @switchChange="bindswitchChange" >
export default {
data() {
return {
choose:true,
avatarList: [{
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
}, {
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
}, {
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
}],
avatarList1: [{
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
}, {
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
}, {
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
}, {
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
}, {
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
}]
}
},
methods: {
bindswitchChange(res){
console.log(res.value);
this.choose = res.value
},
bindChatChange(){
uni.showModal({
content:"点击了列表",
showCancel:false
})
}
}
}
.chat-custom-right { flex: 1; /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: column; justify-content: space-between; align-items: flex-end; } .chat-custom-text { font-size: 12px; color: #999; } 扩展avatarList 头像组,格式为 [{url:''}] 会将你的所有突变拼接起来 例如:上面的练习 export default { data() { return { choose:true, avatarList: [{ url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' }, { url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' }, { url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' }], avatarList1: [{ url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' }, { url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' }, { url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' }, { url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' }, { url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' }] } } } 小结 通过扩展插槽,可实现多种常见样式的列表 新闻列表类 云端一体混合布局:基于 uni-list 的云端一体新闻列表模板(混合布局) - DCloud 插件市场云端一体垂直布局,大图模式:基于 uni-list 的云端一体新闻列表模板(大图模式) - DCloud 插件市场云端一体垂直布局,多行图文混排:基于 uni-list 的云端一体新闻列表模板(图文混排) - DCloud 插件市场云端一体垂直布局,多图模式:基于 uni-list 的云端一体新闻列表模板(多图显示) - DCloud 插件市场云端一体水平布局,左图右文:基于 uni-list 的云端一体新闻列表模板(左图右文) - DCloud 插件市场云端一体水平布局,左文右图:基于 uni-list 的云端一体新闻列表模板(左文右图) - DCloud 插件市场云端一体垂直布局,无图模式,主标题+副标题:基于 uni-list 的云端一体新闻列表模板(无图显示) - DCloud 插件市场 商品列表类 云端一体列表/宫格视图互切:基于 uni-list 的云端一体商品列表模板 - DCloud 插件市场云端一体列表(宫格模式):基于 uni-list 的云端一体商品列表模板(宫格模式) - DCloud 插件市场云端一体列表(列表模式):基于 uni-list 的云端一体商品列表模板(列表模式) - DCloud 插件市场 来源: uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/component/uniui/uni-list.html 相关文章
发表评论