uniapp 实现类似keep-alive效果（从列表页进入详情页，返回列表页滚动条位置不变）


uniapp的页面生命周期函数onPageScroll可以拿到滚动距离的值

将列表页滚动的距离scrollTop值 存到data中

1
2
3
onPageScroll : function(e) { 
    this.scrollTop = e.scrollTop; 
},

在点击跳转详情的方法中，将scrollTop值存缓存

1
2
3
4
5
6
7
toDetail(id) {
   uni.setStorage({
    key:"listTop",
    data:this.scrollTop
   })
   ...
}

返回列表页时，在onShow中使用uni.pageScrollTo 将缓存的scrollTop值渲染到页面上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
onShow() {
//滚动条
  uni.getStorage({
     key:"listTop",
     success: (res) => {
      if(!isNaN(res.data)){
      var lefts = uni.pageScrollTo({
        scrollTop:res.data,
        duration:0
      })
      }
     }
  })
},

列表页面关闭时将scrollTop值清空

1
2
3
4
5
6
onUnload() {
    uni.setStorage({
    key:"listTop",
    data:0
    })
}