溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
記錄一下本次項目我使用的方法，有更簡單便捷的方法，歡迎交流
描述： 假設有a b c 頁面
做法： 使用到了vuex ，beforeRouteLeave
1.首先在vuex中state定義一個變量來記錄當前的瀏覽的位置
//state中定義數據
state: {
carrerTouScroll: {
height: '' //滾動的距離
}
}
//mutations 操作state數據
mutations: {
setCarrerTouScroll (state, disdance) { //管理賽事 滾動距離
state.carrerTouScroll.height = disdance
},
}
//使用getters 有的不加這句也可以，但是有時候不加就不行，所以還是加上吧
getters: {
getCarrerTou: state => state.carrerTouScroll
}
2.在需要的頁面中 我使用了beforeRouteLeave 來記錄沒有路由離開的時候當前瀏覽的位置
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 頁面加一個參數就好了
{
path: '/careerAddMainTeam',
name: 'CareerAddMainTeam',
component: CareerAddMainTeam,
meta: {
touFlag: true
}
},
當然你也可以使用to.name ，如果需要跳轉頁面不多的話
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頁面獲取完數據的時候使用$nextTick,讓頁面恢復到上次瀏覽的位置
this.$nextTick(() => {
this.scrollTop = this.$store.state.carrerTouScroll.height
document.documentElement.scrollTop = this.scrollTop
})
一定要在b頁面獲取完數據后使用nextTick，不然是沒有效果的
這次就記錄到這，如果有別的好方法，請指出
到此這篇關于vue 移動端記錄頁面瀏覽位置的方法的文章就介紹到這了,更多相關vue 移動端頁面瀏覽位置內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
