vue-scroller記錄滾動位置的示例代碼

更新時間：2018年01月17日 16:44:27 作者：無敵小坑筆

本篇文章主要介紹了vue-scroller記錄滾動位置的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

問題描述:

列表頁進入詳情頁，或者tab頁切換，然后再返回列表頁，希望能切換到之前滾動位置

解決問題思路:

切換到其他頁面前記錄位置，返回列表頁的時候返回位置。這就需要借助vue-router的beforeRouteEnter和beforeRouteLeave這兩個鉤子去實現(xiàn).

還有一種更簡單粗暴的方法， vue-scroller.min.js源碼中添加寬高不為零判斷，實現(xiàn)方式見評論，是最近代碼優(yōu)化的時候發(fā)現(xiàn)的。

代碼部分:

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)//同步轉(zhuǎn)異步操作

    }

  })

 }

},

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 的使用

等下周發(fā)版的時候，我貼上鏈接，可以體驗下效果

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue源碼探究之虛擬節(jié)點的實現(xiàn)
這篇文章主要介紹了Vue源碼探究之虛擬節(jié)點的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
基于vue.js的分頁插件詳解
這篇文章主要為大家詳細介紹了基于vue.js的分頁插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
前端vue3?setup使用教程
這篇文章主要為大家介紹了前端vue3架構(gòu)setup使用教程，詳細介紹?setup?的用法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-02-02
Vue3和Vite不得不說的那些事
這篇文章主要為大家詳細介紹了Vue3和Vite的那些事，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
如何用vue-cli3腳手架搭建一個基于ts的基礎(chǔ)腳手架的方法
這篇文章主要介紹了如何用vue-cli3腳手架搭建一個基于ts的基礎(chǔ)腳手架的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
Vue3?中?watch?與?watchEffect?區(qū)別及用法小結(jié)
這篇文章主要介紹了Vue3?中?watch?與?watchEffect?有什么區(qū)別？watch中需要指明監(jiān)視的屬性，也需要指明監(jiān)視的回調(diào)，而watchEffect中不需要指明監(jiān)視的屬性，只需要指明監(jiān)視的回調(diào)，回調(diào)函數(shù)中用到哪個屬性，就監(jiān)視哪個屬性，本文給大家詳細介紹，需要的朋友參考下
2022-06-06
vue頁面回退或關(guān)閉,發(fā)送請求不中斷問題
這篇文章主要介紹了vue頁面回退或關(guān)閉,發(fā)送請求不中斷問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
vue項目調(diào)試的三種方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue項目調(diào)試的三種方法,大家可以根據(jù)需要選擇調(diào)試方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2023-09-09
在vue里面設(shè)置全局變量或數(shù)據(jù)的方法
下面小編就為大家分享一篇在vue里面設(shè)置全局變量或數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue3中的defineExpose使用示例教程
這篇文章主要介紹了vue3中的defineExpose使用,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-09-09