仿微信聊天組界面實現

項目介紹

在 uniapp 中利用 flex 佈局實現了一個仿微信的聊天組界面，主要是 css 層的知識，一樣適用於其餘前端環境。若是使用 Hbuilder 直接運行該項目便可，若是隻是想移植 html 和 css 實現佈局效果，查看 pages/index/index.vue 便可。

github地址： github.com/zifeiyu666/…

解決了什麼問題？

1. 即時通訊聊天組/羣聊中不一樣人數頭像顯示問題。
2. 聊天組最近一次聊天內容長度超出的顯示處理。
3. 聊天組標題很長的時候顯示省略號，而且聊天組寬度是自適應的。

使用的技術和技巧

1. 頭像顯示
   1. 利用 flex 佈局實現了不一樣尺寸頭像的顯示效果
   2. justify-content: center; align-items:center; align-content: center;三個屬性聯合使用實現了頭像的水平處置居中
   3. flex-wrap: wrap-reverse; 實現了換行的時候從下往上排
2. 聊天組標題名稱和時間的顯示格式
   1. 聊天組標題和時間分別居左居右，利用 justify-content: space-between 實現
   2. 聊天組標題超寬顯示省略號會把時間擠到換行

   .title-text{
   		overflow: hidden;
   		text-overflow: ellipsis;
   		white-space: nowrap;
   	}
   	.time{
   		white-space: nowrap; // 這裏爲了防止時間被擠到變形
   	}
   複製代碼

源碼展現

<template>
	<view>
		<view class="list" v-for='(item, index) in list' :key='index'>
			<view class="avatar" v-if='item.avatarList.length > 9'>
				<img :src="i" alt="" class='avatar-img-small' v-for='(i, index) in item.avatarList.slice(0,9)' :key='index'>
			</view>
			<view class="avatar" v-else-if='item.avatarList.length > 4'>
				<img :src="i" alt="" class='avatar-img-small' v-for='(i, index) in item.avatarList' :key='index'>
			</view>
			<view class="avatar" v-else-if='item.avatarList.length > 1'>
				<img :src="i" alt="" class='avatar-img-middle' v-for='(i, index) in item.avatarList' :key='index'>
			</view>
			<view class="avatar" v-else>
				<img :src="i" alt="" class='avatar-img-big' v-for='(i, index) in item.avatarList' :key='index'>
			</view>
			<view class="content">
				<view class="title">
					<text class='title-text'>{{item.name}}</text>
					<text class="time">{{item.lastMsg.time}}</text>
				</view>
				<view class='msg'>{{item.lastMsg.username}}:{{item.lastMsg.msg}}</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import demoList from '@/demo.json'
	export default {
		data() {
			return {
				title: 'Hello',
				list: demoList.list
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.list{
		display: flex;
		/* margin-bottom: 20upx; */
		padding: 20upx;
	}
	.avatar{
		background-color: #F1F1F1;
		border-radius: 8upx;
		min-width: 100upx;
		max-width: 100upx;
		min-height: 100upx;
		max-height: 100upx;
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		flex-wrap: wrap-reverse;
		margin-right: 20upx;
	}
	.avatar-img-big{
		width: 98%;
		margin: 1%;
	}
	.avatar-img-middle{
		width: 47%;
		margin: 1%;
	}
	.avatar-img-small{
		width: 31%;
		margin: 1%;
	}
	.title{
		font-size: 32upx;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.title-text{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.time{
		font-size: 28upx;
		color: #C0C0C0;
		white-space: nowrap;
	}
	.content{
		overflow: hidden;
		flex-grow: 1;
		justify-content: center;
		display: flex;
		flex-direction: column;
	}
	.msg{
		width: 100%;
		font-size: 28upx;
		color: #C0C0C0;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
</style>

複製代碼