微信小程序緩存滑動距離，當頁面瀏覽到一定位置，滑動其他頁面后返回該頁面記錄之前的滑動距離

15.微信小程序緩存滑動距離

我們在瀏覽頁面的時候，然后左滑或者右滑到新的頁面，等返回此頁面，我們希望可以記錄上次滑動的距離

雖然這個實現起來並不難，但是會遇到一些坑，因為scroll-view的組件里面有個bindscroll滾動事件，我們縱向滾動頁面，可以通過e.detail.scrollTop記錄滑動的距離，但是當我們橫向滾動時，還會出現一個問題，這個bindscroll事件還會執行一次，記錄我們滑動當前的頁面距離，通過測試發現，最后橫向滑動的時候，他的scrollTop 是0，所以我們設置緩存時需要判斷如果scrollTop不等於0的時候，我們才要設置緩存

• index.wxml

<swiper bindchange="change" current-item-id="{{docid}}" duration="100">
	<scroll-view scroll-top="{{top}}" bindscroll="scroll"></scroll-view>
</swriper>

• index.js 設置緩存

//scroll-view 滾動事件
scroll: function (e) {
    // 因為scroll當橫向滑動另一個頁面時，他也會多滑動一次，而最后一次就是0
    if (e.detail.scrollTop != 0) {
    //設置緩存
      wx.setStorage({
        key: 'key',
        //    緩存滑動的距離，和當前頁面的id
        data: [e.detail.scrollTop, e.target.dataset.id]
      })
    }
  }

• index.js 獲取緩存

在swiper的bindchange事件中獲取
change: function (e) {
  var docid = e.detail.currentItemId;
  this.setData({ docid: docid })
  // 獲取緩存距離
  wx.getStorage({
    key: 'key',
    success: function (res) {
      // 判斷如果返回剛才滑動的頁面，才獲取緩存
      if (res.data[1] == docid) {
        that.setData({ top: res.data[0] });
      }
    }
  })
}