這篇文章主要介紹了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() }
上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:
在angular中基於ng-alain如何定義自己的select組件?
以上是在vue中scroller返回頁面並且記住滾動位置如何實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!