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下拉列表功能實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
vue+mockjs模擬數(shù)據(jù)實現(xiàn)前后端分離開發(fā)的實例代碼
本篇文章主要介紹了vue+mockjs模擬數(shù)據(jù)實現(xiàn)前后端分離開發(fā)的實例代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08
解決ant-design-vue中menu菜單無法默認展開的問題
這篇文章主要介紹了解決ant-design-vue中menu菜單無法默認展開的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue數(shù)字金額動態(tài)變化功能實現(xiàn)方法詳解
這篇文章主要介紹了vue實現(xiàn)數(shù)字金額動態(tài)變化效果，數(shù)字動態(tài)變化是我們在前端開發(fā)中經(jīng)常需要做的效果，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09
如果在面試中，面試官問你Vue組件之間有哪些數(shù)據(jù)通信方式，你會怎么回復(fù)，不要擔心，本文為大家整理了超全的Vue3中組件數(shù)據(jù)通信方式，需要的小伙伴快收藏起來吧2023-06-06
Vue.js 2.0 移動端拍照壓縮圖片預(yù)覽及上傳實例
這篇文章主要介紹了Vue.js 2.0 移動端拍照壓縮圖片預(yù)覽及上傳實例，本來移動端開發(fā)H5應(yīng)用，準備將mui框架和Vue.js+vue-router+vuex 全家桶結(jié)合起來使用2017-04-04
本篇文章主要介紹了用Vue.extend構(gòu)建消息提示組件的方法實例，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要為大家介紹了vue組件historyApiFallback作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
element-ui table組件如何使用render屬性的實現(xiàn)
這篇文章主要介紹了element-ui table組件如何使用render屬性的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
在?Vue.js?中，$emit和$on方法是兩個常用的方法，用于實現(xiàn)組件間的通信，雖然它們的名字很相似，但它們的作用和用法有所不同，本文將介紹$emit和$on方法的區(qū)別，并通過代碼示例來說明它們的用法,感興趣的朋友可以參考下2023-07-07