スクロールビューチャットトップドロップダウンロードし、元の場所に残っています

それを記録!

まず、イベントの先頭にスクロール・コンポーネント内のイベント、およびスクロールを定義

<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 //新窗口高度
		}
}		

そして、2つのメソッドを実装します。

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