問(wèn)題描述:

列表頁(yè)進(jìn)入詳情頁(yè)，或者tab頁(yè)切換，然后再返回列表頁(yè)，希望能切換到之前滾動(dòng)位置

解決問(wèn)題思路:

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

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

代碼部分:

beforeRouteEnter(to,from,next){ if(!sessionStorage.askPositon || from.path == '/'){//當(dāng)前頁(yè)面刷新不需要切換位置  sessionStorage.askPositon = '';  next(); }else{  next(vm => {    if(vm && vm.$refs.scrollerBottom){//通過(guò)vm實(shí)例訪問(wèn)this     setTimeout(function () {      vm.$refs.scrollerBottom.scrollTo(0, sessionStorage.askPositon, false);     },0)//同步轉(zhuǎn)異步操作    }  }) }},beforeRouteLeave(to,from,next){//記錄離開時(shí)的位置 sessionStorage.askPositon = this.$refs.scrollerBottom && this.$refs.scrollerBottom.getPosition() && this.$refs.scrollerBottom.getPosition().top; next()}, 

需要注意的點(diǎn):

1.熟悉vue-router和vue-scroller的api

2.beforeRouteEnter的時(shí)候，是無(wú)法通過(guò)this去訪問(wèn)vue實(shí)例的，需要借助于vm

3.setTimeout 0 的使用

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。