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