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