vue 移動端記錄頁面瀏覽位置的方法
更新時間：2020年03月11日 08:37:53 作者：那年
這篇文章主要介紹了vue 移動端記錄頁面瀏覽位置的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
記錄一下本次項目我使用的方法，有更簡單便捷的方法，歡迎交流
描述： 假設有a b c 頁面
- 從a頁面 到 b頁面 ，b頁面到c頁面
- b到c頁面的時候需要記錄當前b的瀏覽位置，c返回到b的時候滾動到上次瀏覽的位置
- b在返回a的時候，在從a進入b 返回的是b的頂部（也就是不記錄瀏覽位置）
做法： 使用到了vuex ，beforeRouteLeave
1.首先在vuex中state定義一個變量來記錄當前的瀏覽的位置
//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 來記錄沒有路由離開的時候當前瀏覽的位置
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
}
},
當然你也可以使用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頁面獲取完數(shù)據(jù)的時候使用$nextTick,讓頁面恢復到上次瀏覽的位置
this.$nextTick(() => {
this.scrollTop = this.$store.state.carrerTouScroll.height
document.documentElement.scrollTop = this.scrollTop
})
一定要在b頁面獲取完數(shù)據(jù)后使用nextTick，不然是沒有效果的
這次就記錄到這，如果有別的好方法，請指出
到此這篇關于vue 移動端記錄頁面瀏覽位置的方法的文章就介紹到這了,更多相關vue 移動端頁面瀏覽位置內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue+elementUI用戶修改密碼的前端驗證規(guī)則
用戶登錄后修改密碼,密碼需要一定的驗證規(guī)則,這篇文章主要介紹了vue+elementUI用戶修改密碼的前端驗證,需要的朋友可以參考下2024-03-03
在本篇文章里小編給大家整理的是關于Vue數(shù)據(jù)綁定實例寫法以及相關知識點，需要的朋友們學習下。2019-08-08
使用Vue.js實現(xiàn)一個循環(huán)倒計時功能
在Web應用中,倒計時功能常用于各種場景,如活動倒計時、定時任務提醒等,Vue.js作為一款輕量級的前端框架,提供了豐富的工具和API來實現(xiàn)這些功能,本文將詳細介紹如何使用Vue.js實現(xiàn)一個循環(huán)倒計時功能,需要的朋友可以參考下2024-09-09
Vue中的無限加載vue-infinite-loading的方法
本篇文章主要介紹了Vue中的無限加載vue-infinite-loading的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Vue?使用postMessage?實現(xiàn)父子跨域通信
這篇文章主要介紹了Vue應用?postMessage?實現(xiàn)父子跨域通信,通過示例介紹了postMessage的使用，本文結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-12-12
Vue.js 實現(xiàn)數(shù)據(jù)展示全部和收起功能
這篇文章主要介紹了Vue.js 實現(xiàn)數(shù)據(jù)展示全部和收起功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
本文主要介紹了vue實現(xiàn)聊天框自動滾動的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
el-table實現(xiàn)搜索高亮展示并滾動到元素位置的操作代碼
這篇文章主要介紹了el-table實現(xiàn)搜索高亮展示并滾動到元素位置,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
vue-cli提供的腳手架只是一個最基礎的，也可以說是Vue團隊認為的工程結構的一種最佳實踐。這篇文章主要介紹了vue-cli的工程模板與構建工具 ,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue中@click綁定多個事件問題(教你避坑),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08