快捷導(dǎo)航

vue 移動端記錄頁面瀏覽位置的方法

更新時間：2020年03月11日 08:37:53 作者：那年

這篇文章主要介紹了vue 移動端記錄頁面瀏覽位置的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

記錄一下本次項目我使用的方法，有更簡單便捷的方法，歡迎交流

描述：假設(shè)有a b c 頁面

從a頁面到 b頁面，b頁面到c頁面
b到c頁面的時候需要記錄當(dāng)前b的瀏覽位置，c返回到b的時候滾動到上次瀏覽的位置
b在返回a的時候，在從a進入b 返回的是b的頂部（也就是不記錄瀏覽位置）

做法：使用到了vuex ，beforeRouteLeave

1.首先在vuex中state定義一個變量來記錄當(dāng)前的瀏覽的位置

//state中定義數(shù)據(jù)
 state: {
  carrerTouScroll: {
   height: '' //滾動的距離
   }
  }
 
 
 //mutations 操作state數(shù)據(jù)
 mutations: {
  setCarrerTouScroll (state, disdance) { //管理賽事 滾動距離
   state.carrerTouScroll.height = disdance
  },
 }
 
 
 //使用getters 有的不加這句也可以，但是有時候不加就不行，所以還是加上吧
  getters: {
   getCarrerTou: state => state.carrerTouScroll 
   }

2.在需要的頁面中我使用了beforeRouteLeave 來記錄沒有路由離開的時候當(dāng)前瀏覽的位置

 beforeRouteLeave (to, from, next) { // 離開路由前
  let that = this
  if (to.meta.touFlag) {
   let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
   this.$store.commit('setCarrerTouScroll', scrollTop)
  } else {
   this.$store.commit('setCarrerTouScroll', 0)
  }
  next()
 },

其中to.meta.touFlag 是我自己定義的，因為需要記錄的頁面很多，我覺的這樣比較方便，只需要在route 頁面加一個參數(shù)就好了

 {
  path: '/careerAddMainTeam',
  name: 'CareerAddMainTeam',
  component: CareerAddMainTeam,
  meta: {
   touFlag: true
  }
 },

當(dāng)然你也可以使用to.name ，如果需要跳轉(zhuǎn)頁面不多的話

 beforeRouteLeave (to, from, next) { // 離開路由前
  let that = this
  if (to.name === 'CareerAddMainTeam') {
   let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
   this.$store.commit('setCarrerTouScroll', scrollTop)
  } else {
   this.$store.commit('setCarrerTouScroll', 0)
  }
  next()
 },

3.最后一步就是在每次b頁面獲取完數(shù)據(jù)的時候使用$nextTick,讓頁面恢復(fù)到上次瀏覽的位置

 this.$nextTick(() => {
      this.scrollTop = this.$store.state.carrerTouScroll.height
      document.documentElement.scrollTop = this.scrollTop
     })

一定要在b頁面獲取完數(shù)據(jù)后使用nextTick，不然是沒有效果的

這次就記錄到這，如果有別的好方法，請指出

到此這篇關(guān)于vue 移動端記錄頁面瀏覽位置的方法的文章就介紹到這了,更多相關(guān)vue 移動端頁面瀏覽位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: