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

以你之姓@ 2021-07-25 16:25 1591阅读 0赞

**目录**

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

二、带圆点

三、自定义右侧内容

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

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

--------------------

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

## 二、带圆点 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

## 三、自定义右侧内容 ##

![20210303012424652.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6][]

<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>

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

![20210303012909403.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7][]

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/1c922bac7cf64174b6ccd99eb47cb130.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/05c6a05c3ab6499580e2f49a8ce3ce79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/77d87a6bcde84b6b9dc029c187777299.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/961b67adf4e7448780355bb252047749.png
[20210303012424652.png]: /images/20210725/2a03253dd38b43ea98ee90551adea57d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: /images/20210725/bf2868224ac146158ee95fe2603b3e8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5]: /images/20210725/ebd9b7878a35452ca968c7c0ec3cf82d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6]: /images/20210725/f6581bb3929b41b7ad5600203d2dba04.png
[20210303012909403.png]: /images/20210725/d2d762ae45c2489ebaccc4fdc4f1bd8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7]: /images/20210725/82bac85f496e4fd59c9199a2fa0d1302.png