第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用vue-router如何記錄滾動條位置

使用vue-router如何記錄滾動條位置

手掌心 2018-10-12 15:09:24
想請教一下,用vue-router返回的時候滾動條在原位置怎么做?用默認的hash模式的。比如一個list頁點擊進入detail頁,我在這時記錄下list頁滾動條的位置,然后在detail頁返回到list頁時設(shè)置滾動條位置為剛才保存那個值。但這樣做會出現(xiàn)一個滾動條在頂部突然變到那個值的地方,體驗比較差。// list頁route中的data鉤子route : {    data : function () {        var _this = this;        // 返回同一個位置        var scrollTop = sessionStorage.getItem("scrollTop");        if (scrollTop) {            _this.$nextTick(function () {                    $(".abuild-record-layout").scrollTop(scrollTop);            });        }    }}就是這樣一個列表頁,一個詳情頁,然后在返回列表頁,滾動條需要回到原來的位置
查看完整描述

1 回答

?
心有法竹

TA貢獻1866條經(jīng)驗 獲得超5個贊

只需在vue中設(shè)置saveScrollPostioin,而vue2.0默認會保存scroll位置,你什么都不需要做。

但是問題又來了,如果一共兩個View,第一個頁面View1,是一個無限的分頁滾動列表,假設(shè)我們向下滾動了2頁后,然后點擊列表中的一個Item,進入到另一個頁面View2,此時返回或者調(diào)用history.go(-1),發(fā)現(xiàn)頁面重新裝載(mounted)了,數(shù)據(jù)變成了第1頁的。怎么辦???

解決辦法就是:
建議使用vuex做state管理,在View1mounted(對應(yīng)vue1.0的attached)后,檢查當前state數(shù)據(jù)的length,只有當length === 0時,才去Load Data。而返回或者history.go(-1), 不會改變state的。

偽代碼:

mounted() {    if(this.items.length === 0) {        this.loadData();
    }
}


查看完整回答
反對 回復(fù) 2018-11-07
  • 1 回答
  • 0 關(guān)注
  • 1995 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號