scroll-view 聊天记录 顶部下拉加载并停留在原先位置

记录一下!

首先,在组件中定义滚动事件,及滚动到顶部事件

<scroll-view   scroll-y="true" :scroll-top="scrolTop" @scroll="scroll" @scrolltoupper="loadingMore" > 

定义变量

data() {
	return {
		loadMessage:‘’,
		message:[],
		scrolTop:0,
		old:{
			scrolTop:0,
		},
		oldheight:0,//标签位置
		newheight:0 //新窗口高度
		}
}		

接着实现两个方法:

scroll: function(e) {  
	let newH = e.detail.scrollHeight
	if(this.newheight==0){
		this.newheight = newH 
	}else if(this.newheight!=newH){
		this.oldheight = newH-this.newheight
		this.newheight = newH 
		console.log(this.newheight,this.oldheight)
	}
	 
	this.old.scrolTop = e.detail.scrollTop 
}
loadingMore(){
	let that = this
	that.loadMessage='加载中' 
	uni.request({
		 url:‘’
		success(res){ 
				 if(res.data.data.length==0){
				 	that.loadMessage='没有更多了'
				 }else{
				 	let list = res.data.data 
				 	list.forEach(item=>{
				 		that.messages.push(item);
				 	})   
				 	that.loadMessage='查看更多消息'
			 		that.scrolTop = that.old.scrolTop
			 		that.$nextTick(function() {
			 			that.scrolTop = that.oldheight
			 		}); 
				}  
		} 
	})  
}

搞定,收工!

发布了24 篇原创文章 · 获赞 11 · 访问量 5416

猜你喜欢

转载自blog.csdn.net/weixin_44037376/article/details/98634896