微信小程序缓存滑动距离，当页面浏览到一定位置，滑动其他页面后返回该页面记录之前的滑动距离

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] });
      }
    }
  })
}