重点:如果遇到消息已读未读的这种状态的切换,可以直接用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;
},

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

uni.setStorage({
	key:"newsTop",
	data:this.scrollTop
})

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)
	}
})

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

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

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

onBackPress(e) {
	if(e.from == "backbutton"){
		uni.setStorage({
			key:"newsTop",
			data:0
		})
		uni.navigateBack();
		return true;
	}
},
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐