vue如何通過滾動行為實現從列表到詳情

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

vue項目滾動行為

場景：項目中，從列表進入詳情，再從詳情返回列表時，想直接定位到離開時的位置。

列表頁點擊某一個進入到詳情頁：

進入到詳情頁：

從詳情頁點擊返回到列表頁到離開的位置：

實現方式一：html5 history模式

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

export defaultnewRouter({

 mode: 'history' // 默認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>

實現方式二：監聽scrollTop, js原始寫法(組件同樣需要設置緩存keep-alive)

1在組件的data中定義一個scrollTop屬性，用來記錄監聽的scrollTop。

2在created或者mounted鉤子里添加監聽事件。

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

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

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

4在deactivated鉤子里記錄當前的scrolltop(即從列表頁進入詳情頁)

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

這里存到了sessionStorage里邊，也可以使用狀態管理。

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

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue如何通過滾動行為實現從列表到詳情”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!