vue中記錄滾動條位置的兩種方法
更新時間：2023年01月16日 11:05:41 作者：愛敲碼的老余
最近用 Vue 做移動端頁面遇到一個問題,需要記住滾動條的位置,所以下面這篇文章主要給大家介紹了關(guān)于vue中記錄滾動條位置的兩種方法,文中給出了詳細(xì)的實(shí)例,需要的朋友可以參考下
1、方法一
在點(diǎn)擊的時候記錄滾動條位置，存入本地
再次進(jìn)入該路由讀取滾動跳位置
1、1 跳轉(zhuǎn)時路由存入scroll 如果要有多個頁面，可以把名稱也存進(jìn)去，這里默認(rèn)一個頁面
methods: {
go() {
console.log(document.documentElement.scrollTop)
localStorage.setItem("scroll", document.documentElement.scrollTop)
this.$router.push({path: '/'})
}
}1、2 讀取scroll位置 再次進(jìn)入該路由時從本地錄取scroll位置
利用scrollBehavior ,在
router/index.js中，配置路由中的scrollBehaviors事件
const router = new VueRouter({
mode: 'hash',
routes,
scrollBehavior(to, from){
if(to.name==='fatherSlot'){ //name為路由名字
return {x:0, y: parseInt(localStorage.getItem('scroll'))}//讀取本地的scroll
}
console.log("to",to,"from",from)
}
})2、方法二
利用
vue的keep-alive, 使用緩存機(jī)制來記錄滾動條位置
但是有個缺點(diǎn)，頁面刷新后就不記錄了，但是簡單高效
2、1 配置需要緩存的路由 緩存pageA,pageB,里面代碼都一樣，如演示圖一樣。pageA,pageC為組件的名字.
html
<keep-alive :include="['pageA','pageC']">
<router-view/>
</keep-alive>2、2 在路由內(nèi)記錄滾動位置
javascript
data() {
return {
curScrollTop: 0 //記錄滾動條位置對象
}
},
//此鉤子函數(shù)會反復(fù)觸發(fā),是keep-alive特有的鉤子函數(shù)，取
activated() {
document.documentElement.scrollTop = this.curScrollTop || 0
},
//路由離開時的鉤子函數(shù),存
beforeRouteLeave (to, from, next) {
this.curScrollTop = document.documentElement.scrollTop || 0
next()
},總結(jié)
到此這篇關(guān)于vue中記錄滾動條位置的兩種方法的文章就介紹到這了,更多相關(guān)vue記錄滾動條位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文是小編精心給大家收藏整理的關(guān)于Vue2.2.0+新特性,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
vue項(xiàng)目中運(yùn)用webpack動態(tài)配置打包多種環(huán)境域名的方法
本人分享一個vue項(xiàng)目里，根據(jù)命令行輸入不同的命令，打包出不同環(huán)境域名的方法。需要的朋友跟隨小編一起看看吧2019-06-06
vue3.0如何修改瀏覽器標(biāo)題(靜態(tài))
這篇文章主要介紹了vue3.0如何修改瀏覽器標(biāo)題(靜態(tài))，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue中數(shù)據(jù)字典dicts的簡單說明和用法介紹
這篇文章主要給大家介紹了關(guān)于vue中數(shù)據(jù)字典dicts的簡單說明和用法的相關(guān)資料,如果您想在Vue中使用字典查詢,您可以使用Vue的計(jì)算屬性和方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細(xì)介紹了Vue2中Element?UI表單的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要為大家介紹了vue3封裝自定義v-model的hooks示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
正常情況下Vue推薦用props向子組件參數(shù),但是在特定場景下,使用$attrs會更方便,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue+iview實(shí)現(xiàn)分頁及查詢功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁面內(nèi)組件全過程(WEB)
寫頁面的時候都會用到一些導(dǎo)航欄、點(diǎn)擊不同的部分切換不同的頁面,下面這篇文章主要給大家介紹了關(guān)于Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁面內(nèi)組件的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue中的文字換行問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09