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

我们在浏览页面的时候,然后左滑或者右滑到新的页面,等返回此页面,我们希望可以记录上次滑动的距离

虽然这个实现起来并不难,但是会遇到一些坑,因为scroll-view的组件里面有个bindscroll滚动事件,我们纵向滚动页面,可以通过e.detail.scrollTop记录滑动的距离,但是当我们横向滚动时,还会出现一个问题,这个bindscroll事件还会执行一次,记录我们滑动当前的页面距离,通过测试发现,最后横向滑动的时候,他的scrollTop 是0,所以我们设置缓存时需要判断如果scrollTop不等于0的时候,我们才要设置缓存

  • index.wxml
<swiper bindchange="change" current-item->
        <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] });
      }
    }
  })
}