uniapp组件-uni-list-chat聊天列表

目录

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

二、带圆点

三、自定义右侧内容

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

五、带通知角标的多头像聊天列表

---

 

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

<template>
	<view>
		<uni-section title="圆头像且显示分割线" type="line"></uni-section>
		<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"
		/>
	</view>
</template>

二、带圆点

<template>
	<view>
		<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>
	</view>
</template>

三、自定义右侧内容

<template>
	<view>
		<uni-list-chat
			title="张三"
			avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
			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>
	</view>
</template>

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

<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-text="2"
			:clickable="true"
			@click="onClick"
		/>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {};
	},
	methods: {
		onClick() {
			uni.showToast({
				title: '列表被点击'
			});
		}
	}
};
</script>

五、带通知角标的多头像聊天列表

<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-text="2"
			:clickable="true"
			@click="onClick"
			:avatarList="avatarList"
		/>
	</view>
</template>
<script>
export default {
	data() {
		return {
			avatarList: [
				{url: '/static/logo.png'},
				{url: '/static/logo.png'},
				{url: '/static/logo.png'}
			]
		};
	},
	methods: {
		onClick() {
			uni.showToast({
				title: '列表被点击'
			});
		}
	}
};
</script>