uniapp简单的消息发送回复框架

<template>
    <view class="content">
        <scroll-view scroll-with-animation="true" style="heig

<template>
	<view class="content">
		<scroll-view scroll-with-animation="true" style="height: 800rpx;" scroll-y="true" :scroll-top="scrollTop">
			<view class="" v-for="(item,index) in pageList1">
				<view style="padding: 20rpx 100rpx 20rpx 40rpx;" class="">
					<view class="" style="padding: 20rpx;background-color: #82848A;border: 1rpx solid red;border-radius: 15rpx;">
						客服：您得这个问题非常严肃
						{{item.content}}
					</view>
				</view>
				<view style="display: flex;flex-direction: row;justify-content: flex-end;" class="" >
					{{item.content1}}
				</view>
			</view>
			<input  placeholder="请输入内容" v-model="value1" style="background-color: #82848A;" type="text"  @input="handleInput"/>
			<view @click="but" class="">
				发送
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageList1:[],
				valueInput:'',
				value1:'',
				scrollTop:0,
				
			}
		},
		computed: {
			
		},
		onReady() {

		},
		onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替
		    console.log("滚动距离为：" + e.scrollTop);
		},
		methods: {
			handleInput(e){
				this.valueInput = e.detail.value
				
			},
			but(){
				if(this.valueInput){
					this.pageList1.push({
						content:'大大苏打萨达大苏打实打实的大苏打实打实大啊倒萨大苏打大苏打撒旦',
						content1:this.valueInput,
					})
					this.valueInput = null
					this.value1 = null
					this.$nextTick(function() {
						setTimeout(() => {
							this.scrollTop += 300
						}, 200)
					});
					
				}else{
					uni.showToast({
						position:'bottom',
						icon:'none',
						title:'输入内容不能为空'
					})
					
				}
				
				
				
			}
		}
	}
</script>

<style>

</style>