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