uniapp 使用组件-uni-list聊天列表

冰糖果粒橙

已于 2022-12-27 16:51:57 修改

阅读量3.4k

点赞数

分类专栏： uniapp 文章标签： uni-app

于 2022-11-17 10:12:44 首次发布

本文链接：https://blog.csdn.net/weixin_46324536/article/details/127898153

版权

uniapp 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

需要从uni-app插件市场中进行安装:

一、圆/方头像且显示分割线


	<uni-list :border="false">
		<uni-list-chat
			:avatar-circle="true"
			title="张三"
			avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
			note="圆头像且显示分割线.圆头像且显示分割线.圆头像且显示分割线.圆头像且显示分割线"
			time="2020.02.30 xxx"
			:clickable="false"
		/>
		<uni-list-chat
			title="张三"
			avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
			note="方头像且显示分割线.方头像且显示分割线.方头像且显示分割线.方头像且显示分割线"
			time="2020.02.30 xxx"
			:clickable="false"
		/>
	</uni-list>

二、带圆点

<uni-list :border="false">
			<uni-list-chat
				:avatar-circle="true"
				title="张三"
				avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
				note="圆头像,带圆点且不显示分割线.圆头像,带圆点且不显示分割线."
				time="2020.02.30 xxx"
				:clickable="false"
				badge-positon="left"
				badge-text="dot"
			/>
			<uni-list-chat
				:avatar-circle="true"
				title="张三"
				avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
				note="圆头像,带圆点且不显示分割线.圆头像,带圆点且不显示分割线."
				time="2020.02.30 xxx"
				:clickable="false"
				badge-positon="left"
				badge-text="dot"
				:badge-text="2"
			/>
		</uni-list>

三、自定义右侧内容

	<uni-list :border="false">
					<uni-list-chat title="张三"
						avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
                        ellipsis="1" 
						note="自定义右侧内容.自定义右侧内容.自定义右侧内容.自定义右侧内容">
						<view class="chat-custom-right">
							<text class="chat-custom-text">刚刚</text>
							<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
						</view>
					</uni-list-chat>
				</uni-list>

四、带通知角标的单头像聊天列表

<template>
	<view>
		<uni-list-chat
			title="单头像"
			avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
			note="带通知角标的单头像聊天列表.带通知角标的单头像聊天列表."
			time="2020.02.30 xxx"
            badge-positon="left"
			:badge-text="2"
			:clickable="true"
			@click="onClick"
		/>
	</view>
</template>
 
<script>
export default {
	components: {},
	data() {
		return {};
	},
	methods: {
		onClick() {
			uni.showToast({
				title: '列表被点击'
			});
		}
	}
};
</script>