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組件庫，大廠產品還是比較靠譜些，上拉加載、下滑刷新這些用起來都比較簡單，效果也不錯。