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通過滾動行為實現從列表到詳情,返回列表原位置的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
