uniapp实现聊天功能

<template>
	<view class="location">
		<view class="content">
			<view id="scrollview">
				<view v-for="item in arrty" style="display: flex; flex-direction: column; width: 100%;">
					<view v-if="item.botContent!=''" style="float: left; padding-top: 20rpx;">
						<view style="display: flex; align-items: center; padding-right: 200rpx;">
							<view style="padding-left: 10rpx;">
								<image :src="item.image" class="portrait"></image>
							</view>
							<view class="paint"></view>
							<view class='color'>
								<viwe>{{item.botContent}}</viwe>
							</view>
						</view>
					</view>

					<view v-else style="float: right; padding-top: 20rpx; margin-left: auto;">
						<view style="display: flex; align-items: center; padding-right: 10rpx; padding-left: 200rpx;">
							<view class='color' style="padding-right: 10rpx;">
								<viwe>{{item.userContent}}</viwe>
							</view>
							<view class="paint-right"></view>
							<view>
								<image :src="item.image" class="portrait"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="los">
			<view class="uni-text">
				<view class="uni-textarea">
					<textarea v-model="value" cursor-spacing="20" auto-height :show-confirm-bar='false' maxlength="-1"
						hold-keyboard confirm-hold></textarea>
				</view>
				<view class="send_out" @click="sendout">发送</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: '',
				scrollTop: 0,
				windowHeight: 0,
				arrty: [{
						botContent: "hello，请问我有么可以帮助你的吗？",
						recordId: 0,
						titleId: 0,
						userContent: "",
						userId: 0,
						image: '../../static/logo.png',
					},
					{
						botContent: "",
						recordId: 0,
						titleId: 0,
						userContent: "你好呀我想问你一件事",
						userId: 0,
						image: '../../static/logo.png',
					},
					{
						botContent: "hello，请问我有么可以帮助你的吗？",
						recordId: 0,
						titleId: 0,
						userContent: "",
						userId: 0,
						image: '../../static/logo.png',
					},
					{
						botContent: "",
						recordId: 0,
						titleId: 0,
						userContent: "你好呀我想问你一件事",
						userId: 0,
						image: '../../static/logo.png',
					},

					{
						botContent: "",
						recordId: 0,
						titleId: 0,
						userContent: "你好呀我想问你一件事",
						userId: 0,
						image: '../../static/logo.png',
					},
					{
						botContent: "",
						recordId: 0,
						titleId: 0,
						userContent: "你好呀我想问你一件事",
						userId: 0,
						image: '../../static/logo.png',
					},
					{
						botContent: "",
						recordId: 0,
						titleId: 0,
						userContent: "你好呀我想问你一件事",
						userId: 0,
						image: '../../static/logo.png',
					},
					{
						botContent: "",
						recordId: 0,
						titleId: 0,
						userContent: "你好呀我想问你一件事",
						userId: 0,
						image: '../../static/logo.png',
					},
					{
						botContent: "",
						recordId: 0,
						titleId: 0,
						userContent: "你好呀我想问你一件事",
						userId: 0,
						image: '../../static/logo.png',
					},
					{
						botContent: "",
						recordId: 0,
						titleId: 0,
						userContent: "2",
						userId: 0,
						image: '../../static/logo.png',
					},
					{
						botContent: "",
						recordId: 0,
						titleId: 0,
						userContent: "2",
						userId: 0,
						image: '../../static/logo.png',
					},
					{
						botContent: "",
						recordId: 0,
						titleId: 0,
						userContent: "2",
						userId: 0,
						image: '../../static/logo.png',
					},
					{
						botContent: "",
						recordId: 0,
						titleId: 0,
						userContent: "2",
						userId: 0,
						image: '../../static/logo.png',
					},
					{
						botContent: "",
						recordId: 0,
						titleId: 0,
						userContent: "2",
						userId: 0,
						image: '../../static/logo.png',
					},
					{
						botContent: "",
						recordId: 0,
						titleId: 0,
						userContent: "2",
						userId: 0,
						image: '../../static/logo.png',
					},
				]
			}
		},
		methods: {
			into() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#scrollview').boundingClientRect(res => {
					// 获取聊天页面的高度 转换为rpx
					var widtHeight = this.rpxTopx(res.height);
					// var situation = Math.floor(uni.getSystemInfoSync().windowHeight * 750 / uni.getSystemInfoSync()
					// 	.windowWidth)

					// 如果聊天页面大于整个页面进入if
					if (this.windowHeight <= widtHeight) {
						this.scrollTop = widtHeight;
						// 将聊天页面滚动到底部
						uni.pageScrollTo({
							duration: 10,
							scrollTop: this.scrollTop,
						})
					}
				}).exec();
			},
			rpxTopx(rpx) {
				// px 转化为 rpx
				let dowahight = rpx * 750 / uni.getSystemInfoSync().windowWidth
				// 转换为整数
				return Math.floor(dowahight);
			},
			sendout() {
				if (this.value == '' || this.value == null) {
					return false;
				}
				this.arrty.push({
					botContent: '',
					recordId: 0,
					titleId: 0,
					userContent: this.value,
					userId: 0,
					image: '../../static/logo.png',
				});
				this.into();
				this.window();
				this.value = '';
			},
			// 获取当前页高度
			window() {
				this.windowHeight = this.rpxTopx(uni.getSystemInfoSync().windowHeight);
			}
		},
		onLoad() {
			this.into();
			this.window();
		},
	}
</script>
<style lang="scss" scoped>
	.paint {
		margin-left: 10rpx;
		width: 0;
		height: 0;
		border-top: 4px solid transparent;
		border-right: 4px solid #0000CD;
		border-bottom: 4px solid transparent;
	}

	.paint-right {
		margin-right: 10rpx;
		width: 0;
		height: 0;
		border-top: 4px solid transparent;
		border-left: 4px solid #0000CD;
		border-bottom: 4px solid transparent;
	}

	.color {
		background-color: #0000CD;
		padding: 5rpx;
		padding-left: 20rpx;
		color: #fff;
		word-wrap: break-word;
		word-break: break-all;
	}

	.width {
		width: 550rpx;
	}

	.portrait {
		width: 80rpx;
		height: 80rpx;
		border-radius: 100rpx;
	}

	.uni-text {
		width: 100%;
		padding: 20rpx;
		display: flex;
		align-items: flex-end;
	}

	.los {
		position: fixed;
		bottom: 0;
		padding-bottom: calc(env(safe-area-inset-bottom) + 0rpx) !important; //
		background-color: #ccc;
	}

	.uni-textarea {
		padding-right: 30rpx;

		textarea {
			background-color: #fff;
			width: 580rpx;
			min-height: 52rpx;
			max-height: 150rpx;
		}
	}

	.send_out {
		background-color: #0000CD;
		color: #fff;
		font-size: 34rpx;
		height: 52rpx;
		line-height: 52rpx;
		padding: 0rpx 20rpx;
		border-radius: 5rpx;
	}

	.send_out:active {
		background-color: #4876FF;
	}
</style>