vue中記錄滾動(dòng)條位置的兩種方法
1、方法一
在點(diǎn)擊的時(shí)候記錄滾動(dòng)條位置，存入本地
再次進(jìn)入該路由讀取滾動(dòng)跳位置
1、1 跳轉(zhuǎn)時(shí)路由存入scroll 如果要有多個(gè)頁(yè)面，可以把名稱也存進(jìn)去，這里默認(rèn)一個(gè)頁(yè)面
methods: {
go() {
console.log(document.documentElement.scrollTop)
localStorage.setItem("scroll", document.documentElement.scrollTop)
this.$router.push({path: '/'})
}
}1、2 讀取scroll位置 再次進(jìn)入該路由時(shí)從本地錄取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ī)制來記錄滾動(dòng)條位置
但是有個(gè)缺點(diǎn)，頁(yè)面刷新后就不記錄了，但是簡(jiǎn)單高效
2、1 配置需要緩存的路由 緩存pageA,pageB,里面代碼都一樣，如演示圖一樣。pageA,pageC為組件的名字.
html
<keep-alive :include="['pageA','pageC']">
<router-view/>
</keep-alive>2、2 在路由內(nèi)記錄滾動(dòng)位置
javascript
data() {
return {
curScrollTop: 0 //記錄滾動(dòng)條位置對(duì)象
}
},
//此鉤子函數(shù)會(huì)反復(fù)觸發(fā),是keep-alive特有的鉤子函數(shù)，取
activated() {
document.documentElement.scrollTop = this.curScrollTop || 0
},
//路由離開時(shí)的鉤子函數(shù),存
beforeRouteLeave (to, from, next) {
this.curScrollTop = document.documentElement.scrollTop || 0
next()
},總結(jié)
到此這篇關(guān)于vue中記錄滾動(dòng)條位置的兩種方法的文章就介紹到這了,更多相關(guān)vue記錄滾動(dòng)條位置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue-router定義元信息meta操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-12-12
vue3動(dòng)態(tài)監(jiān)聽瀏覽器窗口變化實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3動(dòng)態(tài)監(jiān)聽瀏覽器窗口變化的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
vue3與elementui封裝一個(gè)便捷Loading
這篇文章主要介紹了vue3與elementui封裝一個(gè)便捷Loading，，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
跨域問題是由瀏覽器引起的安全限制,而不是Vue框架本身導(dǎo)致的,Vue本身并不限制跨域訪問,它只是一個(gè)前端框架,負(fù)責(zé)構(gòu)建用戶界面和處理數(shù)據(jù)邏輯,本文給大家介紹了在Vue中解決跨域問題的常用方式,需要的朋友可以參考下2023-10-10
vue-admin-template模板添加tagsview的實(shí)現(xiàn)
本文主要介紹了vue-admin-template模板添加tagsview的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了vue/cli3版本打包如何去掉soucemap文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了Vue.native如何將原生事件綁定到組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
使用vue + less 實(shí)現(xiàn)簡(jiǎn)單換膚功能的示例
下面小編就為大家分享一篇使用vue + less 實(shí)現(xiàn)簡(jiǎn)單換膚功能的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue?3引入了Composition?API，這是一套新的API用于編寫組件，作為Options?API的替代，這篇文章主要介紹了如何優(yōu)化?Vue.js?應(yīng)用程序,需要的朋友可以參考下2023-02-02
在Vue 中實(shí)現(xiàn)循環(huán)渲染多個(gè)相同echarts圖表
這篇文章主要介紹了在Vue 中實(shí)現(xiàn)循環(huán)渲染多個(gè)相同echarts圖表，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07