uniapp 消息列表进入详情后页面返回时保存当前位置——onPageScroll的用法

重点：如果遇到消息已读未读的这种状态的切换，可以直接用this.$set的方式直接更改状态即可。不需要上面的滚动判断。这篇文章只是提供了一个思路。不是最优解。

重点：如果遇到消息已读未读的这种状态的切换，可以直接用this.$set的方式直接更改状态即可。不需要上面的滚动判断。这篇文章只是提供了一个思路。不是最优解。

补充说明

我这边是在Onshow中重新调用了一次接口（刷新消息的已读未读状态），则会出现滚动距离不准的问题。

测试后发现滚动的距离有偏差

uniapp pageScrollTo滚动到1276之后不滚动了
我这边复现的问题就是：页面滚动在1276之前，页面是没有问题的。但是如果滚动的距离超过了1276，则从消息页面返回到消息列表页面时，则页面只会滚动到1276，不会继续向下滚动了。

咨询了一个大神之后，被臭骂一顿，嗯，就一个消息的已读未读，可以不调用接口，直接自行处理即可。

this.newsList[index].readStatus =1;
一行代码搞定。

直接本地更改此条消息的已读未读状态即可。

所以下面的代码可以都不用了……

消息列表记录当前页面位置

消息列表如上图所示，右侧红点代表消息未读。
点击消息进行详情后，然后返回到消息列表中时，需要重新刷新页面，将未读消息转变为已读消息。然后还需要将页面直接定位到之前的位置。

返回到当前页面然后刷新，这个应该是onShow中的方法。在onShow中进行接口的调用，将数据更新，然后页面位置的问题，可以通过onPageScroll的方法来处理。

1.监听页面的滚动

// scrollTop是data中定义的变量，可以将页面的滚动值赋值保存下来。
onPageScroll(e) {
	this.scrollTop = e.scrollTop;
},
1
2
3
4

2.点击消息时，保存到缓存中

uni.setStorage({
	key:"newsTop",
	data:this.scrollTop
})
1
2
3
4

3.在消息列表页面中的onShow函数中获取缓存值

uni.getStorage({
	key:"newsTop",
	success:(res)=> {
		console.log(res.data);
		var timer = setTimeout(()=>{
			uni.pageScrollTo({
			    scrollTop: res.data,  //距离页面顶部的距离
			    duration: 0
			});
			clearTimeout(timer);
		},100)
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13

注意：在onshow中如果要使用uni.pageScrollTo方法让页面滚动到指定位置，需要使用定时器才可以
重点代码如下：

var timer = setTimeout(()=>{
	uni.pageScrollTo({
	    scrollTop: res.data,  //距离页面顶部的距离
	    duration: 0
	});
	clearTimeout(timer);
},100)
1
2
3
4
5
6
7

4.当消息列表返回到其他页面时，则需要进行缓存的清空

onBackPress(e) {
	if(e.from == "backbutton"){
		uni.setStorage({
			key:"newsTop",
			data:0
		})
		uni.navigateBack();
		return true;
	}
},
1
2
3
4
5
6
7
8
9
10