vue中記錄滾動(dòng)條位置的兩種方法

更新時(shí)間：2023年01月16日 11:05:41 作者：愛敲碼的老余

最近用 Vue 做移動(dòng)端頁面遇到一個(gè)問題,需要記住滾動(dòng)條的位置,所以下面這篇文章主要給大家介紹了關(guān)于vue中記錄滾動(dòng)條位置的兩種方法,文中給出了詳細(xì)的實(shí)例,需要的朋友可以參考下

1、方法一

在點(diǎn)擊的時(shí)候記錄滾動(dòng)條位置，存入本地
再次進(jìn)入該路由讀取滾動(dòng)跳位置

1、1 跳轉(zhuǎn)時(shí)路由存入scroll 如果要有多個(gè)頁面，可以把名稱也存進(jìn)去，這里默認(rèn)一個(gè)頁面

    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)，頁面刷新后就不記錄了，但是簡單高效

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)文章

Vue2.2.0+新特性整理及注意事項(xiàng)
本文是小編精心給大家收藏整理的關(guān)于Vue2.2.0+新特性,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-08-08
vue項(xiàng)目中運(yùn)用webpack動(dòng)態(tài)配置打包多種環(huán)境域名的方法
本人分享一個(gè)vue項(xiàng)目里，根據(jù)命令行輸入不同的命令，打包出不同環(huán)境域名的方法。需要的朋友跟隨小編一起看看吧
2019-06-06
vue3.0如何修改瀏覽器標(biāo)題(靜態(tài))
這篇文章主要介紹了vue3.0如何修改瀏覽器標(biāo)題(靜態(tài))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue中數(shù)據(jù)字典dicts的簡單說明和用法介紹
這篇文章主要給大家介紹了關(guān)于vue中數(shù)據(jù)字典dicts的簡單說明和用法的相關(guān)資料,如果您想在Vue中使用字典查詢,您可以使用Vue的計(jì)算屬性和方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01
Vue2中Element?UI表單的使用詳解
這篇文章主要為大家詳細(xì)介紹了Vue2中Element?UI表單的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
vue3封裝自定義v-model的hooks示例詳解
這篇文章主要為大家介紹了vue3封裝自定義v-model的hooks示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
vue2.x中$attrs的使用方法教程
正常情況下Vue推薦用props向子組件參數(shù),但是在特定場景下,使用$attrs會(huì)更方便,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
vue+iview實(shí)現(xiàn)分頁及查詢功能
這篇文章主要為大家詳細(xì)介紹了vue+iview實(shí)現(xiàn)分頁及查詢功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁面內(nèi)組件全過程(WEB)
寫頁面的時(shí)候都會(huì)用到一些導(dǎo)航欄、點(diǎn)擊不同的部分切換不同的頁面,下面這篇文章主要給大家介紹了關(guān)于Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁面內(nèi)組件的相關(guān)資料,需要的朋友可以參考下
2023-06-06
Vue中的文字換行問題
這篇文章主要介紹了Vue中的文字換行問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09