scroll-view 滑动到底部

在做聊天页面的时候,发送消息,消息会自动上移
直接上代码

view

<view class="char bg" :style="{height: windowHeight+'px'}">
	<scroll-view class="scroll" id="scrollview" scroll-y="true" :scroll-top="scrollTop">
		<view class="cu-item">
		
		</view>
	<scroll-view>
</view>

js

data() {
	return{
		scrollTop: 0, //滑动距离
		mitemHeight: 0, //所有消息的高
		windowHeight: 0, //显示的高度
	}
}
methods:{
	// 滚动
	scrollToBottom () {  //哪里需要用到就在哪里使用
		let that = this;
		let query = uni.createSelectorQuery();
		query.selectAll('.cu-item').boundingClientRect();
		query.select('#scrollview').boundingClientRect();
		query.exec((res) => {
			that.mitemHeight = 0;
			//获取所有内部子元素的高度
			// 因为vue的虚拟DOM 每次生成的新消息都是之前的，所以采用异步setTimeout
			res[0].forEach((rect) => that.mitemHeight = that.mitemHeight + rect.height + 40)   
			setTimeout(() => {
			 	//判断子元素高度是否大于显示高度
				if (that.mitemHeight > (that.windowHeight - 100)) {  
				//用子元素的高度减去显示的高度就获益获得序言滚动的高度
					that.scrollTop = that.mitemHeight - that.windowHeight    
				}
	　　　　}, 100)
　　　})
	},
}