uniapp实现聊天室发送信息

<view>
		<view class="main" ref='list'>
			<view v-for="(e,index) in chat" :key="index">
				<view class="left msg" v-if="e.receive ==1">
					<image :src="'../../static/images/'+e.img+'.png'"></image>
					<view class="nr">
						<view class="neir">
							{{e.neir}}
						</view>
						<view class="nt">{{e.name}} {{e.time}}</view>
					</view>
				</view>
				<view class="right msg" v-if="e.send==1">
					<image :src="'../../static/images/'+e.img+'.png'"></image>
					<view class="nr">
						<view class="neir">
							{{e.neir}}
						</view>
						<view class="nt">{{e.time}}</view>
					</view>					
				</view>
				<!-- <view class="center" v-if="e.id==3">
					<view class="inner">{{e.name}}</view>				
				</view> -->
			</view>	
		</view>
		<view class="send">
			<textarea type="text" confirm-type="send" class="chat-send"  v-model="chatm" auto-height="true" show-confirm-bar="false" maxlength="-1" />
			<image src="../../static/send.png" mode="aspectFit" @click="sendMsg"></image>
		</view>
	</view>

<script>
function findScroller(element) {
	element.onscroll = function() { 
		// console.log(element)
		} 
	Array.from(element.children).forEach(findScroller);
}	
findScroller(document.body);
export default{
	data(){
		return{
			chat:[
				{neir:"123465可以1好3必备底部ID不是覅U币是合并是发大V哦难吃的饭你看见电脑城你集散地",name:"小可爱",time:"123",id:1,receive:1},
				{neir:"222",name:"小可爱1",time:"123",id:2,send:1},
				{neir:"123465可以1好3必备底部ID不是覅U币是合并是发大V哦难吃的饭你看见电脑城你集散地",name:"小可爱",time:"123",id:1,receive:1},
				{neir:"123465可以1好3必备底部ID不是覅U币是合并是发大V哦难吃的饭你看见电脑城你集散地",name:"小可爱",time:"123",id:1,receive:1},
				{neir:"123465可以1好3必备底部ID不是覅U币是合并是发大V哦难吃的饭你看见电脑城你集散地",name:"小可爱",time:"123",id:1,receive:1},
				{neir:"123465可以1好3必备底部ID不是覅U币是合并是发大V哦难吃的饭你看见电脑城你集散地",name:"小可爱",time:"123",id:1,receive:1},
				{neir:"123465可以1好3必备底部ID不是覅U币是合并是发大V哦难吃的饭你看见电脑城你集散地",name:"小可爱",time:"123",id:1,receive:1},
			],//聊天内容
			chatm:'',//消息内容
			img:'',				//用户头像
			name:'',			//用户名称
			uname:'',
			uid:'a',
			animationData: {},
			fid:'',
			bb:false,
			bg:'none',
		}
	},
	methods:{
		//发送消息
		sendMsg: function(){
			if(this.chatm.length>0 && this.fid == ''){
				let onemsg = {
					neir:this.chatm,
					img:this.img,
					time:new Date(),
					id:2,
					send:1
				}
				let data = {
					neir:this.chatm,
					img:this.img,
					name:this.name,
					time:new Date(),
					id:1,
				}
				console.log(onemsg,data)
				this.chat.push(onemsg)
				this.chatm = '';//清空
				console.log("一")
				 this.$nextTick(()=>{
				    uni.pageScrollTo({
				        scrollTop: 2000000,    //滚动到页面的目标位置（单位px）
				        duration: 0    //滚动动画的时长，默认300ms，单位 ms
				    });})

			}else if(this.chatm.length>0 && this.fid != ''){
				//一对一聊天
				let onemsg = {
					neir:this.chatm,
					img:this.img,
					time:new Date(),
					fid:this.uid,
					tid:this.fid,
					send:11
				}
				let data = {
					neir:this.chatm,
					img:this.img,
					name:this.name,
					time:new Date(),
					fid: this.uid,
					tid: this.fid,
				}
				console.log(onemsg,data)
				this.otochat.push(onemsg);
				this.chatm = '';//清空
				console.log("二")
				 this.$nextTick(()=>{
				    uni.pageScrollTo({
				        scrollTop: 2000000,    //滚动到页面的目标位置（单位px）
				        duration: 0    //滚动动画的时长，默认300ms，单位 ms
				    });})
			}		
		}
	}
}
</script>

	.main{
		padding: 32rpx 28rpx 160rpx;
	}
	.main,.modfiy-mian{
	
		.msg{
			display: flex;
			
			align-items:flex-end;
			padding: 40rpx 0;
			image{
				flex: none;
				width:64rpx;
				height:64rpx;
				border-radius:18rpx;
				margin: 0 20rpx;
				
			}
			.nr{
				.neir{
					max-width:380rpx;
					padding:26rpx 32rpx;
					// min-height:48rpx;
					// word-wrap: break-word;
					word-break: break-all;
					font-size:28rpx;
					color:rgba(25,29,35,1);
					line-height:40rpx;
				}
				.nt{
					padding-top: 8rpx;
					position: absolute;
					font-size:24rpx;
					color:rgba(25,29,35,0.5);
					line-height:34rpx;
				}
			}
		}
		.left{
			flex-direction: row;
			.neir{
				background:rgba(244,244,244,1);
				border-radius:24rpx 24rpx 24rpx 0px;
			}
		}
		.right{
			flex-direction: row-reverse;
			.neir{
				background:rgba(255,234,222,1);
				border-radius:24rpx 24rpx 0px 24rpx;
			}
			.nt{
				right: 132rpx;
			}
		}
		.center{
			text-align: center;
			padding: 32rpx 0 20rpx;
			.inner{
				font-size:24rpx;
				display: inline-block;
				color:rgba(25,29,35,0.5);
				line-height:34rpx;
			}
		}
	}
	.send{
		position: fixed;
		z-index: 1002;
		bottom: 0;
		width: 100%;
		
		padding-bottom:var(--status-bar-height);
		min-height: 100rpx;
		background:rgba(255,255,255,0.96);
		display: flex;
		.chat-send{
			margin: 12rpx 48rpx;
			
			flex: 1;
			width: 100%;
			min-height:40rpx;
			background:rgba(242,242,242,1);
			border-radius:24rpx;
			font-size:28rpx;
			color:rgba(25,29,35,1);
			line-height:40rpx;
			padding: 24rpx 80rpx 24rpx 24rpx;
		}
		image{
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right: 68rpx;
			top: 32rpx;
		}
	}
	.modify{
		position: fixed;
		overflow: hidden;
		left: 0;
		bottom:-90%;
		width: 100%;
		height: 90%;
		z-index: 1000;
		background: #fff;
		border-radius:48rpx 48rpx 0px 0px;
	}
	.u-name{
		position: absolute;
		top: 0;
		background-color: #fff;
		height: 80rpx;
		text-align: center;
		width: 100%;
		line-height: 80rpx;
	}
	.modfiy-mian{
		padding: 88rpx 28rpx 120rpx;
		box-sizing: border-box;
		height: 100%;
	}
	.bg{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: rgba(0,0,0,0.4);
	}
	.bg{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: rgba(0,0,0,0.4);
	}