Vue 返回記住滾動條位置詳解

時間 2019-11-06

標籤 vue 返回記住滾動條位置詳解简体版

原文原文鏈接

最近用 Vue 作移動端頁面遇到一個問題，從列表頁進入詳情頁，再返回到列表頁，無論以前滾動到哪裏，每次返回時都跳到列表最頂部。css

這樣體驗確定很差，指望的應該是記住滾動條的位置，每次返回仍是在原來的位置上，便於繼續瀏覽。vue

因而在網上搜解決方法，搜了一大圈看了 n 篇文章，都沒有說清楚。起碼我是沒有經過看一篇文章而完美解決，因此決定寫一篇詳細的親測可行的解決方案。git

一共分三步：程序員

給 router-view 添加 keep-alive
獲取並存儲當前 scrollTop
返回時取出並設置 scrollTop

100 多位經驗豐富的開發者參與，在 Github 上得到了 1000+ 個 star 的全棧全平臺開源項目想了解或參與嗎？
項目地址：https://github.com/cachecats/coderivergithub

1、給 router-view 添加 keep-alive

先貼出 keep-alive 官方文檔，不熟悉的能夠先看看文檔。vuex

<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們。因此在由詳情頁返回列表頁時，不讓列表頁刷新。小程序

當組件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命週期鉤子函數將會被對應執行。api

設置 scrollTop 時是在 activated 方法裏，有些文章說獲取 scrollTop 在 deactivated 方法裏，但通過測試，在 deactivated 方法裏並不能準確的獲取 scrollTop 值，每次都是 0。具體緣由暫時不深究，先解決問題。因此把獲取 scrollTop 值放在 item 的點擊事件函數裏執行。緩存

2、獲取並存儲當前 scrollTop

頁面佈局以下：架構

整個頁面是一個 <rounter-view> ，下面又分了兩個 tab，咱們列表頁是一個組件，位於 title 和導航欄之間的區域。

佈局代碼：

<div class="wrapper" ref="wrapper">
    <div class="title">我是標題</div>
    <van-pull-refresh v-model="isRefresh" @refresh="onRefresh" ref="pullRefresh">
      <van-list
          ref="list"
          class="list"
          v-model="loadingMore"
          :finished="finished"
          finished-text="沒有更多了"
          @load="onLoadMore"
      >
        <div class="item-wrapper" v-for="item in list" :key="item.id" @click="clickItem(item)" ref="item">
          <div class="item">{{item}}</div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
複製代碼

用到了 Vant-ui 的下拉刷新和上拉加載更多組件。

能夠看到我一共給了四個 ref ，分別是最外層的 ref="list" ，下拉刷新組件 van-pull-refresh 的 ref="pullRefresh"，列表組件 van-list 的 ref="list"，和每一個 item 的 ref="item"。

爲何給出這麼多呢？由於這裏有個大坑，也是我一直卡住的地方。

咱們知道獲取滾動位置是用 scrollTop 這個屬性，下面咱們就依次打印出這幾個元素的 scrollTop 。

clickItem(item) {
    let wrapperScrollTop = this.$refs.wrapper.scrollTop;
    let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop;
    let listScrollTop = this.$refs.list.scrollTop;
    let itemScrollTop = this.$refs.item.scrollTop;

    console.log('wrapperScrollTop', wrapperScrollTop);
    console.log('pullRefreshScrollTop', pullRefreshScrollTop);
    console.log('listScrollTop', listScrollTop);
    console.log('itemScrollTop', itemScrollTop);

    this.$router.push({name: "detail", params: {data: item}})
},
複製代碼

放到 item 的點擊事件裏觸發。獲得的日誌以下：

WTF？只有第一個 wrapperScrollTop 有值，其餘的都 undefined ！

我也不知道爲啥，以前一直是獲取後三者的 scrollTop ，一直獲取不到，糾結了很久。爲何其餘三個獲取不到我如今還沒整明白，知道緣由的大佬能夠指點一下。

知道了該獲取哪個元素的 scrollTop 就簡單了，獲得值只需存儲起來便可。

由於使用了 keep-alive，頁面被緩存起來了，因此 data 裏的數據不會丟失，能夠在 data 中聲明一個變量 scroll 存儲 scrollTop 的值。也可使用 Vuex。

修改下 clickItem(item) 的代碼，將 scrollTop 的值存儲起來。

clickItem(item) {
    let wrapperScrollTop = this.$refs.wrapper.scrollTop;
    let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop;
    let listScrollTop = this.$refs.list.scrollTop;
    let itemScrollTop = this.$refs.item.scrollTop;

    console.log('wrapperScrollTop', wrapperScrollTop);
    console.log('pullRefreshScrollTop', pullRefreshScrollTop);
    console.log('listScrollTop', listScrollTop);
    console.log('itemScrollTop', itemScrollTop);
    
	//存儲 scrollTop 的值
    this.scroll = wrapperScrollTop;
   
    this.$router.push({name: "detail", params: {data: item}})
},
複製代碼

3、返回時取出並設置 scrollTop

上面已經介紹過了，使用 keep-alive 以後，每次返回頁面會調用 activated 生命週期方法，因此在這個方法裏設置以前記住的 scrollTop，達到記住滾動位置的效果。

代碼很簡單，只有一句話：

activated() {
	this.$refs.wrapper.scrollTop = this.scroll
}
複製代碼

完整的代碼以下：

<template>
  <div class="wrapper" ref="wrapper">
    <div class="title">我是標題</div>
    <van-pull-refresh v-model="isRefresh" @refresh="onRefresh" ref="pullRefresh">
      <van-list
          ref="list"
          class="list"
          v-model="loadingMore"
          :finished="finished"
          finished-text="沒有更多了"
          @load="onLoadMore"
      >
        <div class="item-wrapper" v-for="item in list" :key="item.id" @click="clickItem(item)" ref="item">
          <div class="item">{{item}}</div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>

  export default {


    components: {},
    created() {

    },
    mounted() {
      for (let i = 0; i < 15; i++) {
        this.list.push(i)
      }
    },
    data() {
      return {
        list: [], //列表數據
        loadingMore: false,  //加載更可能是否顯示加載中
        finished: false, //加載是否已經沒有更多數據
        isRefresh: false, //是否下拉刷新
        scroll: 0,
      }

    },

    activated() {
      this.$refs.wrapper.scrollTop = this.scroll
    },

    deactivated() {

    },
    methods: {

      clickItem(item) {
        let wrapperScrollTop = this.$refs.wrapper.scrollTop;
        let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop;
        let listScrollTop = this.$refs.list.scrollTop;
        let itemScrollTop = this.$refs.item.scrollTop;

        console.log('wrapperScrollTop', wrapperScrollTop);
        console.log('pullRefreshScrollTop', pullRefreshScrollTop);
        console.log('listScrollTop', listScrollTop);
        console.log('itemScrollTop', itemScrollTop);

        this.scroll = wrapperScrollTop;
        this.$router.push({name: "detail", params: {data: item}})
      },

      onRefresh() {
        this.list = [];
        this.finished = false;
        setTimeout(() => {
          for (let i = 0; i < 15; i++) {
            this.list.push(i)
          }
          this.isRefresh = false
        }, 2000)
      },

      //加載更多
      onLoadMore() {
        console.log('load more')
        let newList = [];
        for (let i = this.list.length; i < this.list.length + 15; i++) {
          newList.push(i)
        }
        this.list = this.list.concat(newList)
        this.loadingMore = false;
        if (this.list.length > 50) {
          this.finished = true
        }
      },

    }
  }
</script>

<style scoped lang="scss">
  @import "../../public/css/index";

  .wrapper {
    width: 100%;
    height: calc(100vh - 100px);
    overflow-x: hidden;
    box-sizing: border-box;
    margin-bottom: px2rem(50);
    .title{
      font-size: px2rem(20);
      padding: px2rem(10);
    }
    .list {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      .item-wrapper {
        display: flex;
        flex-direction: column;
        font-size: px2rem(16);
        margin: px2rem(8);
        padding: px2rem(8);
        background-color: white;
        .item {
          font-size: px2rem(16);
          padding: px2rem(10);
        }
      }
    }
  }
</style>
複製代碼

好了，以上就是 Vue 返回記住滾動條位置的詳解。