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