uniapp 實作類似keep-alive效果（從清單頁進入詳情頁，傳回清單頁滾動條位置不變）

使用uniapp 做小程式已經大半年了。uniapp 相比原生的小程式省事兒很多，而且能相容多平台H5，app，微信小程式，支付寶小程式等。

但辯證的看待問題，有利就有弊。用uniapp 開發離不開看文檔，當你用到一個個vue特性的需要确認在uniapp中支不支援。

就比如今天的标題如果說在vue中使用keep-alive就能輕松解決，而這個屬性在uniapp中不支援。是以我使用scrollTop來實作類似效果。

 uniapp的頁面生命周期函數onPageScroll可以拿到滾動距離的值。

1,将top值 存到data中。

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

2,在點選跳轉詳情的方法中，将top值存緩存。

toDetail(id) {
   uni.setStorage({
    key:"listTop",
    data:this.scrollTop
   })
   ...
}      

3,在onShow中使用uni.pageScrollTo 将緩存的top值渲染到頁面上。

onShow() {
//滾動條
  uni.getStorage({
     key:"listTop",
     success: (res) => {
      if(!isNaN(res.data)){
      var lefts = uni.pageScrollTo({
        scrollTop:res.data,
        duration:0
      })
      }
     }
  })
},      

4,頁面關閉時将top值清空

onUnload() {
    uni.setStorage({
    key:"listTop",
    data:0
    })
}      

好了，打完收工，希望可以幫到你。