vue如何通過滾動(dòng)行為實(shí)現(xiàn)從列表到詳情

這篇文章主要介紹了vue如何通過滾動(dòng)行為實(shí)現(xiàn)從列表到詳情，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

vue項(xiàng)目滾動(dòng)行為

場(chǎng)景：項(xiàng)目中，從列表進(jìn)入詳情，再?gòu)脑斍榉祷亓斜頃r(shí)，想直接定位到離開時(shí)的位置。

列表頁(yè)點(diǎn)擊某一個(gè)進(jìn)入到詳情頁(yè)：

進(jìn)入到詳情頁(yè)：

從詳情頁(yè)點(diǎn)擊返回到列表頁(yè)到離開的位置：

實(shí)現(xiàn)方式一：html5 history模式

1在路由設(shè)置router/index.js中，設(shè)置組件的元信息被緩存。（keepAlive:true），并修改mode模式為history。

export defaultnewRouter({

 mode: 'history' // 默認(rèn)hash
 routes: [
// ***************** 列表組件 ******************** //
 {
  path: '/',
  name: list,
  component: list,
  meta: {
  keepAlive: true
  }
 }

2該組件路由被匹配顯示的方式：

<keep-alive>
 <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

實(shí)現(xiàn)方式二：監(jiān)聽scrollTop, js原始寫法(組件同樣需要設(shè)置緩存keep-alive)

1在組件的data中定義一個(gè)scrollTop屬性，用來記錄監(jiān)聽的scrollTop。

2在created或者mounted鉤子里添加監(jiān)聽事件。

mounted () {
 document.addEventListener('scroll',this.handelscroll)
},

3在methods方法中定義這個(gè)handelscroll方法，并將監(jiān)聽的scrollTop賦值給data中的scrollTop()

handelscroll() {
 this.scrollTop = document.body.scrollTop|| document.documentElement.scrollTop || window.pageYOffset
},

4在deactivated鉤子里記錄當(dāng)前的scrolltop(即從列表頁(yè)進(jìn)入詳情頁(yè))

deactivated (){
 sessionStorage.setItem('scrollTop',this.scrollTop)
},

這里存到了sessionStorage里邊，也可以使用狀態(tài)管理。

5在activated鉤子里，定位保存的scrollTop(即從詳情頁(yè)返回列表頁(yè))

activated () {
 document.body.scrollTop =document.documentElement.scrollTop = window.pageYOffset =sessionStorage.getItem('scrollTop')
},

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue如何通過滾動(dòng)行為實(shí)現(xiàn)從列表到詳情”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!