vue通過滾動行為實現(xiàn)從列表到詳情,返回列表原位置的方法
更新時間：2018年08月31日 08:39:19 作者：羞羞的鐵拳
今天小編就為大家分享一篇vue通過滾動行為實現(xiàn)從列表到詳情,返回列表原位置的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue項目滾動行為
場景：項目中，從列表進入詳情，再從詳情返回列表時，想直接定位到離開時的位置。
列表頁點擊某一個進入到詳情頁：
進入到詳情頁：
從詳情頁點擊返回到列表頁到離開的位置：
實現(xiàn)方式一：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>
實現(xiàn)方式二：監(jiān)聽scrollTop, js原始寫法(組件同樣需要設置緩存keep-alive)
1在組件的data中定義一個scrollTop屬性，用來記錄監(jiān)聽的scrollTop。
2在created或者mounted鉤子里添加監(jiān)聽事件。
mounted () {
document.addEventListener('scroll',this.handelscroll)
},
3在methods方法中定義這個handelscroll方法，并將監(jiān)聽的scrollTop賦值給data中的scrollTop()
handelscroll() {
this.scrollTop = document.body.scrollTop|| document.documentElement.scrollTop || window.pageYOffset
},
4在deactivated鉤子里記錄當前的scrolltop(即從列表頁進入詳情頁)
deactivated (){
sessionStorage.setItem('scrollTop',this.scrollTop)
},
這里存到了sessionStorage里邊，也可以使用狀態(tài)管理。
5在activated鉤子里，定位保存的scrollTop(即從詳情頁返回列表頁)
activated () {
document.body.scrollTop =document.documentElement.scrollTop = window.pageYOffset =sessionStorage.getItem('scrollTop')
},
以上這篇vue通過滾動行為實現(xiàn)從列表到詳情,返回列表原位置的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
下面小編就為大家?guī)硪黄獪\談Vue.js 1.x 和 2.x 實例的生命周期。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單圖片上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細介紹了Vue draggable實現(xiàn)從左到右拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了uniapp?vue與nvue輪播圖輪播圖組件的實例代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-12-12
這篇文章主要介紹了vue調用微信JSDK 掃一掃，相冊等需要注意的事項，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
vue中有一個很神奇的東西叫v-model，它可以完成我們的需求。，本文重點給大家介紹vue中使用v-model完成組件間的通信,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)開始時間和結束時間的范圍查詢，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
最近看完Vue3和Vite文檔之后,就寫了個小demo,整體感覺下來還是很絲滑的,下面這篇文章主要給大家介紹了關于vite+element-plus項目基礎搭建的全過程,需要的朋友可以參考下2022-07-07
this.$router.push攜帶參數(shù)跳轉頁面的實現(xiàn)代碼
這篇文章主要介紹了this.$router.push攜帶參數(shù)跳轉頁面,this.$router.push進行頁面跳轉時，攜帶參數(shù)有params和query兩種方式，本文結合實例代碼給大家詳細講解，需要的朋友可以參考下2023-04-04
defineProps宏函數(shù)不需要從vue中import導入的原因解析
這篇文章主要介紹了defineProps宏函數(shù)不需要從vue中import導入的原因解析,本文給大家介紹的非常詳細,需要的朋友可以參考下2024-07-07