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

末蓝、 2021-07-25 15:11 1918阅读 1赞

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

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

# 补充说明 #

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

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

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

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

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

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

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

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

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

返回到当前页面然后刷新，这个应该是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;
    	}
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/966fd953d1a649fbbe03edc2581eee60.png