vue-scroller記錄滾動位置的示例代碼
更新時間：2018年01月17日 16:44:27 作者：無敵小坑筆
本篇文章主要介紹了vue-scroller記錄滾動位置的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
問題描述:
列表頁進入詳情頁，或者tab頁切換，然后再返回列表頁，希望能切換到之前滾動位置
解決問題思路:
切換到其他頁面前記錄位置，返回列表頁的時候返回位置。這就需要借助vue-router的beforeRouteEnter和beforeRouteLeave這兩個鉤子去實現.
還有一種更簡單粗暴的方法， vue-scroller.min.js源碼中添加寬高不為零判斷，實現方式見評論，是最近代碼優(yōu)化的時候發(fā)現的。
代碼部分:
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下拉列表功能實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
vue+mockjs模擬數據實現前后端分離開發(fā)的實例代碼
本篇文章主要介紹了vue+mockjs模擬數據實現前后端分離開發(fā)的實例代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08
解決ant-design-vue中menu菜單無法默認展開的問題
這篇文章主要介紹了解決ant-design-vue中menu菜單無法默認展開的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue實現數字金額動態(tài)變化效果，數字動態(tài)變化是我們在前端開發(fā)中經常需要做的效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-09-09
如果在面試中，面試官問你Vue組件之間有哪些數據通信方式，你會怎么回復，不要擔心，本文為大家整理了超全的Vue3中組件數據通信方式，需要的小伙伴快收藏起來吧2023-06-06
這篇文章主要介紹了Vue.js 2.0 移動端拍照壓縮圖片預覽及上傳實例，本來移動端開發(fā)H5應用，準備將mui框架和Vue.js+vue-router+vuex 全家桶結合起來使用2017-04-04
本篇文章主要介紹了用Vue.extend構建消息提示組件的方法實例，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要為大家介紹了vue組件historyApiFallback作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
element-ui table組件如何使用render屬性的實現
這篇文章主要介紹了element-ui table組件如何使用render屬性的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
在?Vue.js?中，$emit和$on方法是兩個常用的方法，用于實現組件間的通信，雖然它們的名字很相似，但它們的作用和用法有所不同，本文將介紹$emit和$on方法的區(qū)別，并通過代碼示例來說明它們的用法,感興趣的朋友可以參考下2023-07-07