本篇主要介紹了vue-scroller記錄滾動位置的範例程式碼,內容挺不錯的,現在分享給大家,也給大家做個參考。
問題描述:
清單頁進入詳情頁,或是tab頁切換,然後再回到清單頁,希望能切換到先前捲動位置
解決問題想法:
切換到其他頁面前記錄位置,返回清單頁的時候返回位置。這就需要藉助vue-router的beforeRouteEnter和beforeRouteLeave這兩個鉤子去實現.
還有一種更簡單粗暴的方法, vue-scroller.min.js源碼中添加寬高不為零判斷,實現方式見評論,是最近程式碼優化的時候發現的。
程式碼部分:
beforeRouteEnter(to,from,next){ if(!sessionStorage.askPositon || from.path == '/'){//当前页面刷新不需要切换位置 sessionStorage.askPositon = ''; next(); }else{ next(vm => { if(vm && vm.$refs.scrollerBottom){//通过vm实例访问this setTimeout(function () { vm.$refs.scrollerBottom.scrollTo(0, sessionStorage.askPositon, false); },0)//同步转异步操作 } }) } }, beforeRouteLeave(to,from,next){//记录离开时的位置 sessionStorage.askPositon = this.$refs.scrollerBottom && this.$refs.scrollerBottom.getPosition() && this.$refs.scrollerBottom.getPosition().top; next() },
#要注意的點:
1.熟悉vue-router和vue -scroller的api
2.beforeRouteEnter的時候,是無法透過this去存取vue實例的,需要藉助於vm
##3.setTimeout 0 的使用等下週發版的時候,我貼上鏈接,可以體驗下效果Angular中使用better-scroll外掛的方法介紹
以上是關於vue-scroller記錄滾動位置的程式碼介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!