uni-app实现聊天页面功能

聊天页面

<template>
	<view class="contents">
		<view class="shang" style="position: fixed;top:0;width: 100vw;">
			<view class="dingbu" :style="{paddingTop:`${statusBar}px`}">
				<view @click="toBack" class="zhuce">
					<u-icon name="arrow-left" color="#fff" size="22"></u-icon>
				</view>
				<text>{{user.userBei.username}}</text>
				<view style="width: 22px;"></view>
			</view>
		</view>
		<view class="chat" :style="{paddingTop:`${42+statusBar}px`}">
			<scroll-view :style="{height: `${windowHeight-inputHeight- (statusBar*2)-84}rpx`}" id="scrollview"
				scroll-y="true" :scroll-top="scrollTop" class="scroll-view">
				<!-- 聊天主体 -->
				<view id="msglistview" class="chat-body">
					<view v-if="msgList.length">
						<!-- 聊天记录 -->
						<view class="liaotian-item" :class="item.type==2?'liaotian-item-right':''"
							v-for="(item,index) in msgList" :key="index">
							<!-- 别人发的消息 -->
							<view class="item-left" v-if="item.type==1">
								<image :src="user.userBei.image" mode=""></image>
								<view>
									<text class="content">{{item.text}}</text>
									<text class="time">{{item.time}}</text>
								</view>
							</view>
							<!-- 自己发的消息 -->
							<view class="item-right" v-if="item.type==2">
								<view>
									<text class="content">{{item.text}}</text>
									<text class="time">{{item.time}}</text>
								</view>
								<image :src="user.user.image" mode=""></image>
							</view>
						</view>

					</view>
					<view v-else class="no-chat">
						<text class="xian"></text>
						<text
							class="wenzi">{{yuyan=='en'?'There are currently no chat records available':'暂无聊天记录'}}</text>
						<text class="xian"></text>
					</view>
				</view>
			</scroll-view>
			<!-- 底部消息发送栏 -->
			<!-- 用来占位，防止聊天消息被发送框遮挡 -->
			<view class="chat-bottom">
				<view class="send-msg" :style="{bottom:`${keyboardHeight}rpx`}">
					<view class="uni-textarea">
						<textarea v-model="chatMsg" maxlength="255" confirm-type="send" @confirm="handleSend"
							:show-confirm-bar="false" :adjust-position="false" @linechange="sendHeight" @focus="focus"
							@blur="blur"></textarea>
					</view>
					<button @click="handleSend" class="send-btn">{{yuyan=='en'?'Send':'发送'}}</button>
				</view>
			</view>
		</view>

	</view>

</template>
<script>
	import app from '../../App.vue';
	export default {
		data() {
			return {
				yuyan: "",
				statusBar: app.globalData.statusBar,
				imgUrl: app.globalData.imgUrl,
				//键盘高度
				keyboardHeight: 0,
				//底部消息发送高度
				bottomHeight: 0,
				//滚动距离
				scrollTop: 0,
				userId: '',
				//发送的消息
				chatMsg: "",
				msgList: [{
						text: '嘿！你在做什么?今天有空吗？跟我一起去兜风？',
						type: 1,
						time: "10:15"
					},
					{
						text: '听起来不错！你现在在哪里？',
						type: 2,
						time: "10:15"
					},
					{
						text: '听起来不错！',
						type: 2,
						time: "10:15"
					}
				],
				user: {},
			}
		},
		updated() {
			//页面更新时调用聊天消息定位到最底部
			this.scrollToBottom();
		},
		computed: {
			windowHeight() {
				return this.rpxTopx(uni.getSystemInfoSync().windowHeight)
			},
			// 键盘弹起来的高度+发送框高度
			inputHeight() {
				return this.bottomHeight + this.keyboardHeight
			}
		},
		filters: {
			time(time) {
				// 时间戳 
				let timeNow = new Date();
				// 获取当前时间的时间日期
				let day1 = (timeNow.getDate() < 10 ? '0' + timeNow.getDate() : timeNow.getDate());

				let timestamp = time;
				// 此处时间戳以毫秒为单位
				let date = new Date(parseInt(timestamp) * 1000);
				let Year = date.getFullYear();
				let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
				let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
				let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				// let GMT =Year+'/' + Moth + '/' + Day+' '+ Hour + ':' + Minute + ':' + Sechond;
				if (day1 == Day) {
					return Hour + ':' + Minute
				} else {
					return Year + '/' + Moth + '/' + Day + Hour + ':' + Minute
				}
			},
		},
		onLoad(options) {
			uni.onKeyboardHeightChange(res => {
				//这里正常来讲代码直接写
				//this.keyboardHeight=this.rpxTopx(res.height)就行了 
				//但是之前界面ui设计聊天框的高度有点高,为了不让键盘和聊天输入框之间距离差太大所以我改动了一下。
				this.keyboardHeight = this.rpxTopx(res.height - 30)
				if (this.keyboardHeight < 0) this.keyboardHeight = 0;
			})
			// this.scrollToBottom()
			this.yuyan = uni.getLocale()
			this.userId = options.id
			this.getUserInfor()
		},
		onShow() {
			this.yuyan = uni.getLocale()
		},
		onUnload() {
			uni.offKeyboardHeightChange()
		},
		methods: {
			// 退回
			toBack() {
				uni.navigateBack()
			},
			focus() {
				this.scrollToBottom()
			},
			blur() {
				this.scrollToBottom()
			},
			// px转换成rpx
			rpxTopx(px) {
				let deviceWidth = uni.getSystemInfoSync().windowWidth
				let rpx = (750 / deviceWidth) * Number(px)
				return Math.floor(rpx)
			},
			// 监视聊天发送栏高度
			sendHeight() {
				setTimeout(() => {
					let query = uni.createSelectorQuery();
					query.select('.send-msg').boundingClientRect()
					query.exec(res => {
						this.bottomHeight = this.rpxTopx(res[0].height)
					})
				}, 10)
			},
			// 滚动至聊天底部
			scrollToBottom(e) {
				setTimeout(() => {
					let query = uni.createSelectorQuery().in(this);
					query.select('#scrollview').boundingClientRect();
					query.select('#msglistview').boundingClientRect();
					query.exec((res) => {
						if (res[1].height > res[0].height) {
							this.scrollTop = this.rpxTopx(res[1].height - res[0].height)
						}
					})
				}, 15)
			},
			// 发送消息
			handleSend() {
				//如果消息不为空
				if (this.chatMsg) {
					let obj = {
						text: this.chatMsg,
						type: 2,
						time: "10:15",
					}
					this.msgList.push(obj);

					this.chatMsg = '';
					this.scrollToBottom()
				} else {
					uni.showToast({
						title: this.yuyan == 'en' ? 'Cannot send a blank message' : '不能发送空白消息',
						icon: "none"
					})
				}
			},
			// 查询两个用户信息
			getUserInfor() {
				let data = {
					uid: app.globalData.uid,
					userId: this.userId,
				}
				this.yrApi.request('User/getUserXiaoxiInfor', 'POST', data).then(res => {
					if (res.data.code == 0) {
						this.user = res.data.data
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	view,
	button,
	text,
	input,
	textarea {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.contents {
		min-height: 100vh;
		box-sizing: border-box;
		background-color: rgba(255, 255, 255, 1);

		.shang {
			z-index: 1;
			background: rgba(86, 125, 244, 1);
			padding: 20rpx;
			display: flex;
			justify-content: left;

			.dingbu {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 36rpx;
					font-weight: 500;
					line-height: 42.18rpx;
					color: rgba(255, 255, 255, 1);
					display: block;
				}

				.zhuce {
					display: flex;
					align-items: center;

					text {
						font-size: 36rpx;
						font-weight: 500;
						line-height: 42.18rpx;
						color: rgba(255, 255, 255, 1);
						display: block;
					}
				}

				.zhuc {
					width: 160rpx;
					height: 80rpx;
					border-radius: 20rpx;
					border: 2rpx solid rgba(255, 255, 255, 1);
					font-size: 32rpx;
					font-weight: 700;
					line-height: 75rpx;
					text-align: center;
					color: rgba(255, 255, 255, 1);
				}

				.yuyan {
					width: 80rpx;
					height: 80rpx;
					border-radius: 20rpx;
					background: rgba(255, 255, 255, 0.2);
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;

					text {
						color: #fff;
					}

					.qiu {
						width: 40rpx;
						height: 40rpx;
					}

					text {
						font-size: 32rpx;
						font-weight: 700;
						line-height: 75rpx;
						text-align: center;
						color: rgba(255, 255, 255, 1);
					}
				}
			}
		}

		/* 聊天消息 */
		.chat {
			.scroll-view {
				::-webkit-scrollbar {
					display: none;
					width: 0 !important;
					height: 0 !important;
					-webkit-appearance: none;
					background: transparent;
					color: transparent;
				}

				.chat-body {
					padding: 24rpx;
					box-sizing: border-box;

					.liaotian-item {
						margin-top: 16px;
						display: flex;
						align-items: flex-start;

						.item-left {
							display: flex;
							align-items: flex-start;
							width: 80%;

							image {
								width: 34px;
								height: 34px;
								border-radius: 50%;
								flex-shrink: 0;
								margin-right: 10px;
							}

							.content {
								display: block;
								padding: 12px 14px;
								border-radius: 0px 15px 15px 15px;
								background: rgba(255, 255, 255, 1);
								box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
								font-size: 14px;
								font-weight: 500;
								line-height: 20px;
								color: rgba(51, 51, 51, 1);
							}

							.time {
								display: block;
								font-size: 12px;
								font-weight: 400;
								line-height: 16px;
								color: rgba(117, 129, 143, 1);
								margin-top: 10rpx;
							}
						}

						.item-right {
							display: flex;
							align-items: flex-start;
							justify-content: flex-end;
							width: 80%;

							image {
								width: 34px;
								height: 34px;
								border-radius: 50%;
								flex-shrink: 0;
								margin-left: 10px;
							}

							.content {
								display: block;
								padding: 12px 14px;
								border-radius: 15px 0px 15px 15px;
								background: rgba(86, 125, 244, 1);
								box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
								font-size: 14px;
								font-weight: 500;
								line-height: 20px;
								color: rgba(255, 255, 255, 1);
							}

							.time {
								display: block;
								font-size: 12px;
								font-weight: 400;
								line-height: 16px;
								color: rgba(117, 129, 143, 1);
								margin-top: 10rpx;
								text-align: right;
							}
						}

					}

					.liaotian-item-right {
						justify-content: flex-end;
					}

				}

				.no-chat {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.wenzi {
						display: block;
						flex-shrink: 0;
						font-size: 14px;
						font-weight: 500;
						line-height: 22px;
						color: rgba(153, 153, 153, 1);
						margin: 0 20rpx;
					}

					.xian {
						display: block;
						width: 100%;
						border-bottom: 1rpx solid rgba(153, 153, 153, 1);
					}
				}
			}

			/* 底部聊天发送栏 */
			.chat-bottom {
				width: 100%;
				background: rgba(245, 245, 245, 1);
				transition: all 0.1s ease;
				// padding-bottom:calc(env(safe-area-inset-bottom));

				.send-msg {
					display: flex;
					align-items: center;
					padding: 16rpx 30rpx;
					padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
					position: fixed;
					bottom: 0;
					width: 100vw;
					transition: all 0.1s ease;
					box-sizing: border-box;
					background-color: rgba(245, 245, 245, 1);
				}

				.uni-textarea {
					textarea {
						width: calc(100vw - 208rpx);
						background: #FFFFFF;
						border-radius: 10rpx;
						font-size: 32rpx;
						color: #333333;
						line-height: 55rpx;
						padding: 10rpx;
						height: 75rpx;
						box-sizing: border-box;
					}
				}

				.send-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 20rpx;
					width: 128rpx;
					height: 75rpx;
					background: #4F7DF5;
					border-radius: 8rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 28rpx;
					flex-shrink: 0;
				}
			}
		}

	}
</style>