vue 每個頁面緩存訪問滑動高度

1楞抡、在想要緩存滑動高度的頁面加入一下代碼

beforeRouteLeave(to, from, next) {

? ? this.$route.meta.scrollHeight = document.documentElement.scrollTop

? ? next();

}

切換路由之前獲取頁面的高度执桌,并存入當(dāng)前路由的meta中(scrollHeight為自定義key)


2舍沙、存入滑動高度后,在路由管理頁面(Router下的index.js頁面)加入路由跳轉(zhuǎn)監(jiān)聽

router.beforeEach((to, from, next) => {

? ? ?next();

?????if(to.meta.scrollHeight) {

? ? ? ? ? ? document.documentElement.scrollTop = to.meta.scrollHeight

? ? ?}

})

查看將要跳轉(zhuǎn)的路由(to)是否含有scrollHeight這個字段,如果有就改變頁面高度杆煞,沒有就跳過

如果出現(xiàn)部分頁面不生效需要用setTimeout把document.documentElement.scrollTop = to.meta.scrollHeight包起來

setTimeout(()=>{

? ??document.documentElement.scrollTop = to.meta.scrollHeight

})


3、這種方法適用于可以獲取到?document.documentElement.scrollTop 的項目蘑险,如果項目整個頁面的根節(jié)點是position定位后固定為height: 100%; width: 100%的滴肿,就需要改變獲取相應(yīng)元素的scrollTop,同時也需要改變router.beforeEach中相應(yīng)元素的scrollTop賦值


4佃迄、這種方法不僅僅限于meta存儲泼差,相應(yīng)的還有?localStorage、vuex呵俏,針對于想要整個項目關(guān)閉后再次打開項目還想要關(guān)閉前的滑動距離堆缘,就需要用?localStorage 來存儲,vuex和meta存儲都只是暫時的普碎,但是meta存儲是最簡單的吼肥,相對于其他兩種不需要遍歷,不需要重新獲取麻车,不需要校驗路由是否相同


5缀皱、也可以參考VueKeepScrollPosition包(并不是每個項目都會生效)

安裝VueKeepScrollPosition:

? ??????npm i? vue-keep-scroll-position

引入VueKeepScrollPosition:

? ? ? ? main.js寫入:import VueKeepScrollPosition from 'vue-keep-scroll-position'????Vue.use(VueKeepScrollPosition)

使用VueKeepScrollPosition:

? ??????<router-view v-keep-scroll-position></router-view>


原理:通過路由變化監(jiān)聽頁面滑動距離并進行存儲,在頁面再次訪問后獲取存儲的滑動距離动猬,并改變頁面的scrollTop

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末啤斗,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子赁咙,更是在濱河造成了極大的恐慌钮莲,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件彼水,死亡現(xiàn)場離奇詭異崔拥,居然都是意外死亡,警方通過查閱死者的電腦和手機猿涨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進店門握童,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人叛赚,你說我怎么就攤上這事澡绩。” “怎么了俺附?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵肥卡,是天一觀的道長。 經(jīng)常有香客問我事镣,道長步鉴,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮氛琢,結(jié)果婚禮上喊递,老公的妹妹穿的比我還像新娘。我一直安慰自己阳似,他們只是感情好骚勘,可當(dāng)我...
    茶點故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著撮奏,像睡著了一般俏讹。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上畜吊,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天泽疆,我揣著相機與錄音,去河邊找鬼玲献。 笑死殉疼,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的捌年。 我是一名探鬼主播株依,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼延窜!你這毒婦竟也來了恋腕?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤逆瑞,失蹤者是張志新(化名)和其女友劉穎荠藤,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體获高,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡哈肖,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了念秧。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片淤井。...
    茶點故事閱讀 40,675評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖摊趾,靈堂內(nèi)的尸體忽然破棺而出币狠,到底是詐尸還是另有隱情,我是刑警寧澤砾层,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布漩绵,位于F島的核電站,受9級特大地震影響肛炮,放射性物質(zhì)發(fā)生泄漏止吐。R本人自食惡果不足惜宝踪,卻給世界環(huán)境...
    茶點故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望碍扔。 院中可真熱鬧瘩燥,春花似錦、人聲如沸不同。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽套鹅。三九已至,卻和暖如春汰具,著一層夾襖步出監(jiān)牢的瞬間卓鹿,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工留荔, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留吟孙,地道東北人。 一個月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓聚蝶,卻偏偏與公主長得像杰妓,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子碘勉,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,685評論 2 360

推薦閱讀更多精彩內(nèi)容