在vue-scroller中如何標記記錄滾動位置

本篇主要介紹了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 的使用

等下週發版的時候，我貼上鏈接，可以體驗下效果

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在vue.js中實作分頁中點選頁碼更換頁面內容

在vue2.0元件中如何實現傳值、通訊

webpack 4.0.0-beta.0版本新功能（詳細教學）

利用SpringMVC解決vue跨網域請求

Vue元件和Route的生命週期（詳細教學）

在Vue2.0中實作使用者權限控制

以上是在vue-scroller中如何標記記錄滾動位置的詳細內容。更多資訊請關注PHP中文網其他相關文章！