vue scroller返回頁面記住滾動(dòng)位置的實(shí)例代碼
更新時(shí)間：2018年01月29日 15:31:55 作者：symY_Y
這篇文章主要介紹了vue scroller返回頁面記住滾動(dòng)位置的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
1，設(shè)置keepAlive：是否緩存
router:
{
path: '/actlist',
name: 'actlist',
component: actlist,
meta: {
keepAlive: true
}
}
2,設(shè)置渲染頁面
app.vue
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
3,記錄滾動(dòng)位置并賦值
beforeRouteEnter(to,from,next){
if(!sessionStorage.askPositon || from.path == '/'){//當(dāng)前頁面刷新不需要切換位置
sessionStorage.askPositon = '';
next();
}else{
next(vm => {
if(vm && vm.$refs.my_scroller){//通過vm實(shí)例訪問this
setTimeout(function () {
vm.$refs.my_scroller.scrollTo(0, sessionStorage.askPositon, true);
},0)//同步轉(zhuǎn)異步操作
}
})
}
},
beforeRouteLeave(to,from,next){//記錄離開時(shí)的位置
sessionStorage.askPositon = this.$refs.my_scroller && this.$refs.my_scroller.getPosition() && this.$refs.my_scroller.getPosition().top;
next()
}
總結(jié)
以上所述是小編給大家介紹的vue scroller返回頁面記住滾動(dòng)位置的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue中錯(cuò)誤圖片的處理的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue中錯(cuò)誤圖片的處理的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue3兼容大部分Vue2的特性，用Vue2代碼開發(fā)Vue3都可以，性能上面打包大小減少 41%，初次渲染快 55%，更新快 133%，內(nèi)存使用減少 54%,本篇文章主要介紹Vue3的7種種組件通信,需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09
放大鏡在很多購物網(wǎng)站都可以看的到，本文主要實(shí)現(xiàn) 固定放大兩倍,鼠標(biāo)進(jìn)入到左側(cè)圖片區(qū)域的時(shí)候,遮罩層顯示,離開時(shí),遮罩層隱藏，感興趣的可以了解一下2021-07-07
element修改form的el-input寬度,el-select寬度的方法實(shí)現(xiàn)
有時(shí)候像form表單這樣，頁面的input、select等寬度不一定會(huì)是一樣的，可能有些長，有些短，本文就介紹了如何element修改form的el-input寬度,el-select寬度的方法實(shí)現(xiàn)，感興趣的可以了解一下2022-02-02
Object.assign觸發(fā)watch原理示例解析
這篇文章主要為大家介紹了Object.assign觸發(fā)watch原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要給大家介紹了關(guān)于Vue生命周期的那些事,在使用vue開發(fā)過程中經(jīng)常會(huì)接觸到生命周期的問題,但對(duì)于每個(gè)鉤子函數(shù)都做了什么,應(yīng)用場(chǎng)景比較模糊,希望通過這次梳理讓自己清楚一些,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細(xì)介紹了Vue.js開發(fā)環(huán)境快速搭建教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細(xì)介紹了vue圖片加載與顯示默認(rèn)圖片的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
淺析vue3響應(yīng)式數(shù)據(jù)與watch屬性
這篇文章主要介紹了vue3響應(yīng)式數(shù)據(jù)與watch屬性的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05
如何用webpack4帶你實(shí)現(xiàn)一個(gè)vue的打包的項(xiàng)目
這篇文章主要介紹了如何用webpack4帶你實(shí)現(xiàn)一個(gè)vue的打包的項(xiàng)目，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06