溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
問題描述:
列表頁進入詳情頁，或者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 的使用
等下周發版的時候，我貼上鏈接，可以體驗下效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
