首頁 > web前端 > js教程 > 主體

關於vue-scroller記錄滾動位置的程式碼介紹

不言
發布: 2018-06-30 16:59:22
原創
2219 人瀏覽過

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

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


以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

Angular中使用better-scroll外掛的方法介紹

##如何理解Vue的.sync修飾符的使用


關於Vue拖曳元件的開發介紹


以上是關於vue-scroller記錄滾動位置的程式碼介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板