uniapp扩展组件---uni-list

已于 2023-07-29 15:19:19 修改
阅读量7.1k 收藏 19
点赞数 13
文章标签： uni-app
于 2023-07-29 15:15:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_75047254/article/details/131994919
版权

文章目录

    • 基本用法
    • 多行内容显示
    • 右侧显示角标、switch
    • 左侧显示略缩图、图标
    • 开启点击反馈和右侧箭头
    • 聊天列表示例

介绍：

组件名：uni-list

代码块： uList、uListItem 

关联组件：

uni-list-item、

uni-badge、

uni-icons、

uni-list-chat

点击下载&安装

文章内容

一、Api属性以及基础用法

点击下方查看：

查看uni-list  Api

基础用法：

属性
  • 设置 title 属性，可以显示列表标题
  • 设置 disabled 属性，可以禁用当前项
用法 
<uni-list>
	<uni-list-item  title="列表文字" ></uni-list-item>
	<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
</uni-list>
二、多行内容显示
属性
  • 设置 note 属性 ，可以在第二行显示描述文本信息
用法 
<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 开关
用法 
<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 可以在左侧显示图标
用法 
 <uni-list>
 	<uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.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
用法 

<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>
六、聊天列表示例

使用uni-list-chat制作一个聊天列表

同时使用uni-list的switch控制显示

<template>
	<view>
		<uni-list>
			<uni-list-item title="学习列表组件" 
			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"//需要跳转的页面
			>
			</uni-list-item>
			 
			 <uni-list-item
			title="uni-list-chat的应用"
			showSwitch="true"
			switch-checked="true"
			@switchChange="bindswitchChange"
			>
				
			</uni-list-item>
		</uni-list>
		
		
		
	<view v-if="choose===true">
		<uni-list>
			<uni-list :border="true">
				<!-- 显示圆形头像 -->
				<uni-list-chat @click="bindChatChange" :avatar-circle="true" clickable title="uni-app" avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" ></uni-list-chat>
				<!-- 右侧带角标 -->
				<uni-list-chat title="uni-app" avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12"></uni-list-chat>
				<!-- 头像显示圆点 -->
				<uni-list-chat title="uni-app" avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" badgePositon="right" badge-text="dot"></uni-list-chat>
				<!-- 头像显示角标 --></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="avatarList1" 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>
	</view>
		

		
	</view>
</template>

<script>
	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
				})
			}
		}
	}
</script>

<style>

				<uni-list-chat title="uni-app" avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text
.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;
}


</style>

 扩展avatarList

头像组，格式为 [{url:''}]

会将你的所有突变拼接起来

例如：上面的练习

<script>
	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'
										}]
			}
		}
	}
</script>

小结

通过扩展插槽，可实现多种常见样式的列表

新闻列表类
  1. 云端一体混合布局：基于 uni-list 的云端一体新闻列表模板（混合布局） - DCloud 插件市场
  2. 云端一体垂直布局，大图模式：基于 uni-list 的云端一体新闻列表模板（大图模式） - DCloud 插件市场
  3. 云端一体垂直布局，多行图文混排：基于 uni-list 的云端一体新闻列表模板（图文混排） - DCloud 插件市场
  4. 云端一体垂直布局，多图模式：基于 uni-list 的云端一体新闻列表模板（多图显示） - DCloud 插件市场
  5. 云端一体水平布局，左图右文：基于 uni-list 的云端一体新闻列表模板（左图右文） - DCloud 插件市场
  6. 云端一体水平布局，左文右图：基于 uni-list 的云端一体新闻列表模板（左文右图） - DCloud 插件市场
  7. 云端一体垂直布局，无图模式，主标题+副标题：基于 uni-list 的云端一体新闻列表模板（无图显示） - DCloud 插件市场
商品列表类
  1. 云端一体列表/宫格视图互切：基于 uni-list 的云端一体商品列表模板 - DCloud 插件市场
  2. 云端一体列表（宫格模式）：基于 uni-list 的云端一体商品列表模板（宫格模式） - DCloud 插件市场
  3. 云端一体列表（列表模式）：基于 uni-list 的云端一体商品列表模板（列表模式） - DCloud 插件市场
来源：

uni-app官网 (dcloud.net.cn)icon-default.png?t=N6B9https://uniapp.dcloud.net.cn/component/uniui/uni-list.html

荣在心中度
关注
  • 13
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
很好用的uni-app节点树组件！
06-23
很好用的uni-app节点树组件！
uniapp 使用组件 uni-list 实现聊天列表功能
M_emory_的博客
06-11 3097
【代码】uniapp 使用组件 uni-list 实现聊天列表功能。 ​ 基本用法 设置title属性，可以显示列表标题 设置disabled属性，可以禁用当前项 设置note属性 ，可以在第二行显示描述文本信息 设置show-badge属性 ，可以显示角标内容 设置show-switch属性，可以显示 switch 开关 设置thumb属性 ，可以在列表左侧显示略缩图 设置show-extra-icon属性，并指定extra-icon可以在左侧显示图标
uniapp组件-ui-list列表
热门推荐
~~
03-03 3万+
目录 一、基本用法 二、显示图标或图片 三、右侧显示 switch/badge 四、使用插槽 官方示例：https://ext.dcloud.net.cn/plugin?id=24 列表组件可以在其中使用图标、略缩图或放置任何你想放的元素，使用场景如：导航菜单、列表、设置中心排版等 一、基本用法 showArrow可以有展开的箭头符号。link不仅有展开的箭头符号，还有点击反馈效果 <template> <view> <uni-list&gt.
uniapp:聊天消息列表（好友列表+私人单聊）支持App、H5、小程序
最新发布
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
04-07 6053
这是一款通用消息列表和聊天模板插件简单易用，助您轻松创建和管理消息与聊天内容。无论是与朋友互动还是团队沟通，都能满足您需求。立即尝试，畅享交流乐趣！
uniapp制作app与小程序前端——list表单配置
hk_hkl的博客
05-11 1040
手把手玩转uniapp前端No.7
uniapp——新闻列表（uni-list、uni-list-item）--顶部下拉刷新--上拉加载更多--顶部提示语
wy313622821的博客
12-07 2万+
1、新闻列表模式 效果图： 代码 <template> <uni-list> <!-- title、note设置标题和小文字 --> <uni-list-item direction="row" v-for="item in info" :key="item.id" :title="item.title" :note="item.user_name + ' '+item.last_modify_date"> <!-- 通过v-slot:
uniapp循环套循环
cccbbbmmm的博客
12-09 1137
并显示每个外层项的名称。然后，在外层循环内部，我们使用嵌套的。在UniApp中实现循环套循环可以使用嵌套的。在上述代码中，我们定义了一个外层循环的数据。通过以上代码，您可以实现循环套循环的效果。，其中每个项包含一个内层循环的数据。在组件模板中，我们首先使用。并显示每个内层项的名称。指令进行外层循环，遍历。指令进行内层循环，遍历。
uniapp-菜单组件
04-11
uni-app 菜单组件，flex布局 <!-- author hzj email [email protected] wechat XHKJ_IT 菜单组件 v0.01 参数： 属性 类型 说明 top Number 菜单项距离顶部的位置 menuList Array 菜单具体项：url 需要跳转的地址，icon：图标，txt：文字内容，type ：跳转方式==navigate，redirect，reLaunch，switchTab，navigateBack
uni-app列表组件 list组件,简单好用通用
chenchuang0128的博客
05-28 4875
下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?-- proList: 条目数组数据 goProDetail:条目点击事件跳转（实现了点击条目数据传值）-->-- proList: 条目数组数据 goProDetail:条目点击事件跳转（实现了点击条目数据传值）-->'proName': '我是项目' + i,'proUnit': '我是详情' + i,'proType': '省级项目','area': '广州',
uniapp中列表（list）组件封装
blackhub的博客
07-10 3765
前言：在uview中没有列表相关的组件，对于有很多页面都是差不多类似于列表的，为了复用性比较高，所以自己封装了一个列表（list）组件
Uni-app之微信小程序list组件
Jocelyn_书
09-04 3961
描述：这是一个在uni-app中list列表组件，上拉加载更多 参考：uni-app的小程序HelloUni的模板——》的列表详情示例 将HelloUni模板中的-——》components下的uni-load-more文件夹复制到你自己文件的components下 在需要使用list组件的地方引入load-more import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'; 并且在components中正确
uniapp-table中改版uni-table插件
07-03
改版uni-table插件功能，新增单击行事件、单击某td事件、单独修改某td的字体颜色；选中行样式修改。主要修改文件uni-tr、uni-td;
uniapp模板--主页
06-06
uni-app页面含轮播，flex布局，饼状图，折线图，应用swiper的等
uniapp uni-calendar日期组件多选
03-07
uniapp uni-calendar日期组件多选 内附参考使用代码
uniapp uView u-picker组件三级联动Demo
02-12
- 1、分2个入口：一个添加，一个编辑（编辑涉及到数据回显） - 2、添加的时候，展示的数据是默认的，是上一列第一行数据的详情（所有的年级（第一列），一年级对应的班（第二列），一班对应的学生（第三列）） ...
uni-app list 2列_万能前端框架uni app初探03：底部导航开发
weixin_39922749的博客
11-21 380
前言本节我们使用uni app的底部导航功能，点击不同tab会显示不同页面，这个功能在实际项目开发中几乎是必备的。一、基础知识1.tabBar如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。Tips当设置 position 为 top 时，将不会显示 icontabBar 中的 list 是一个数组，只能配置最少2个、最多5个...
uniapp 使用组件-uni-list聊天列表
weixin_46324536的博客
11-17 3390
uniapp 使用组件-uni-list聊天列表
uni-app自定义列表组件
仗剑天涯，从摘要开始
01-31 3626
filename: u-list.vue <template> <view class="u-list-item u-f-ac u-f-jsb" hover-class="list-hover" @tap="clickevent" :class="{ 'u-list-item-first': isFirstChild }"> <view class="u-f-a...
uniapp扩展组件卡片实现点赞评论转发的代码
05-14
以下是一个简单的代码示例，实现了卡片的点赞、评论和转发功能，使用了uni-ui扩展组件中的grid、icon、popover和popup组件： ``` <template> <view class="card"> <view class="header"> <image :src="cardData.avatarUrl" class="avatar"></image> <text class="username">{{cardData.username}}</text> <text class="time">{{cardData.time}}</text> </view> <image :src="cardData.imageUrl" class="image"></image> <view class="footer"> <grid :column-num="3" class="actions"> <block> <icon :type="isLiked ? 'like-fill' : 'like'" @click="handleLike"></icon> <text>{{likes}}</text> </block> <block> <icon type="chat" @click="handleComment"></icon> <text>{{comments}}</text> </block> <block> <icon type="share" @click="handleShare"></icon> </block> </grid> </view> <popover v-model="showComment" placement="bottom" trigger="manual"> <view class="comment-popup"> <view class="comment-list"> <scroll-view scroll-y> <view v-for="(comment, index) in commentList" :key="index" class="comment-item"> <text class="username">{{comment.username}}</text> <text class="text">{{comment.text}}</text> </view> </scroll-view> </view> <form class="comment-form" @submit.prevent="handleSubmit"> <textarea placeholder="写评论" v-model="commentText"></textarea> <button type="submit">发送</button> </form> </view> </popover> </view> </template> <script> import { Grid, Icon, Popover, Popup } from 'uni-ui' export default { components: { Grid, Icon, Popover, Popup }, props: { cardData: { type: Object, required: true } }, data() { return { isLiked: false, likes: this.cardData.likes, comments: this.cardData.comments, showComment: false, commentList: this.cardData.commentList, commentText: '' } }, methods: { handleLike() { this.isLiked = !this.isLiked this.likes += this.isLiked ? 1 : -1 }, handleComment() { this.showComment = true }, handleShare() { // TODO: 实现转发功能 }, handleSubmit() { if (this.commentText.trim() === '') { return } const newComment = { username: '我', text: this.commentText } this.commentList.push(newComment) this.comments += 1 this.commentText = '' } } } </script> <style> .card { background-color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); border-radius: 8px; margin-bottom: 16px; } .header { display: flex; align-items: center; padding: 16px; } .avatar { width: 32px; height: 32px; border-radius: 50%; margin-right: 8px; } .username { font-size: 14px; color: #333; } .time { font-size: 12px; color: #999; margin-left: 8px; } .image { width: 100%; height: auto; } .footer { padding: 16px; display: flex; justify-content: space-between; } .actions { display: flex; align-items: center; } .actions block { display: flex; align-items: center; margin-right: 16px; } .actions block:last-child { margin-right: 0; } .comment-popup { padding: 16px; } .comment-list { height: 200px; margin-bottom: 16px; } .comment-item { margin-bottom: 8px; } .comment-item .username { font-size: 14px; color: #333; margin-right: 8px; } .comment-item .text { font-size: 12px; color: #999; } </style> ``` 使用时，可以将cardData传入该组件，其中cardData应包含以下属性： - avatarUrl：头像图片地址 - username：用户名 - time：发表时间 - imageUrl：卡片图片地址 - likes：点赞数 - comments：评论数 - commentList：评论列表，每个评论应包含username和text属性 例如： ``` <template> <view> <card :cardData="cardData"></card> </view> </template> <script> import Card from '@/components/Card' export default { components: { Card }, data() { return { cardData: { avatarUrl: 'https://xxx.com/avatar.jpg', username: '小明', time: '2021-01-01 12:00', imageUrl: 'https://xxx.com/image.jpg', likes: 10, comments: 3, commentList: [ { username: '小红', text: '这张照片很漂亮' }, { username: '小刚', text: '我也想去那里玩' }, { username: '小华', text: '好想吃这个美食啊' } ] } } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

荣在心中度

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值