vue+Better-scroll实现滚动位置保持并对页面切换效果进行优化

前言：

环境限制，只能用hash模式，所以不能直接用vue自身的页面缓存。

如果要保持页面滚动位置，可以在页面滚动结束后将滚动距离保存到缓存中，然后在下次加载页面的时候自动滚动指定距离。

这里以Better-scroll2.0为例进行说明。

示例代码：

<template>
  <div class="page w100 h100">
    <!--数据列表容器-->
    <div class="h100 wrapper pRelative" ref="wrapper">
      <div class="content pRelative">
        <router-link class="item lh30 w100" v-for="(item,index) in list" :key="index" :to="{name:'GoodDetail'}">
          <div class="iblock w30"><img :src="item.img" /></div>
          <div class="goodInfo w70 tl">
            <p class="ellipsis w90 f15">{{item.title}}</p>
            <p class="ellipsis_mul w90 f13 lh15">{{item.desc}}</p>
          </div>
        </router-link>
      </div>
    </div>
    <!--数据列表容器 end-->
    <!--页面切换蒙层-->
    <div v-show="showWhiteBoard==1" class="pAbsolute w100 h100 bgWhite">
      <van-loading type="spinner" style="margin-top:100px;" />
    </div>
    <!--页面切换蒙层 end-->
  </div>
</template>

<script>
  import http from '@/api/index'
  import BScroll from "@better-scroll/core"
  import {
    Loading
  } from 'vant';
  export default {
    name: "Better-Scroll",
    data() {
      return {
        list: '', //数据列表
        scroll: '', //滚动实例
        showWhiteBoard: '' //页面切换蒙层开关
      }
    },
    components: {
      [Loading.name]: Loading,
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        http.getGoodsList({
          goodId: 1001
        }).then(data => {
          if (data && data.goodsList) {
            this.list = data.goodsList
            this.doScroll()
          }
        })
      },
      /**
       * 列表滚动事件处理
       * @param {Object} list
       */
      doScroll: function() {
        //添加滚动处理
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.wrapper, {
              preventDefault: false, //这个不能有，ios系统会受框架层滑动影响
              click: true
            })

            //自动滚动
            let scrollY = localStorage.getItem("scrollY")
            if (scrollY) {
              //显示页面切换的蒙板
              this.showWhiteBoard = 1
              //滚动指定距离
              this.scroll.scrollTo(0, scrollY, 300, undefined);
              //隐藏页面切换的蒙板
              setTimeout(() => {
                this.showWhiteBoard = 0
              }, 300)
            }

            //保存滚动位置
            this.scroll.on("scrollEnd", poy => {
              let scrollY2 = poy && poy.y
              if (scrollY2) localStorage.setItem('scrollY', scrollY2)
            });
          } else {
            this.scroll.refresh()
            this.scroll.scrollTo(0, 0, 100, undefined)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    $bc: #ffffff;
    $fc: #000000;
    overflow: hidden;

    @for $i from 0 to 30 {
      .item:nth-child(#{$i}) {
        background-color: $bc - $i*10;
      }
    }

    .item {
      display: flex;
      padding: 25px;

      img {
        width: 150px;
        height: 150px;
      }

      .goodInfo {
        margin-left: 20px;
      }
    }
  }
</style>

注：例中使用了Better-scroll2.0处理页面滚动，以及页面的自动滚动。

体验优化：

BS滚动指定距离会有一个滚动过程,这样体验就比较差了，如下：

 

 

 解决这个问题，可以在页面加载处理自动滚动的时候添加一个蒙版，遮住这个滚动过程，这样页面切换就会好很多。相关代码如下：

    <!--页面切换蒙层-->
    <div v-show="showWhiteBoard==1" class="pAbsolute w100 h100 bgWhite">
      <van-loading type="spinner" style="margin-top:100px;" />
    </div>
    <!--页面切换蒙层 end-->

//自动滚动
let scrollY = localStorage.getItem("scrollY") if (scrollY) {
    //显示页面切换的蒙板
    this.showWhiteBoard = 1
    //滚动指定距离
    this.scroll.scrollTo(0, scrollY, 300, undefined);
    //隐藏页面切换的蒙板
    setTimeout(() = >{
        this.showWhiteBoard = 0
    },300）
}

如上，蒙版中使用了vant的loading，这样比空白页面更好些（如果运行环境本身对页面切换已经做了loading，那就不用了）。

关闭蒙版的时间设置为自动滚动后300ms，这个时间滚动基本上已经完成了（多次验证结果）。

优化后的效果如下：

 

如上，页面切换没有明显的页面滚动了（使用mock.js模拟数据，所以数据有更新，会有轻微滑动，真实接口数据则不会）。

后记：

Better-Scroll1.x出现ios兼容性问题，升级到2.x，也会有一些问题，处理起来还是有点麻烦的，决定弃用了。

建议使用vant组件库，大厂产品还是比较靠谱些，上拉加载、下滑刷新这些用起来都比较简单，效果也不错。