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)從列表到詳情,返回列表原位置的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
在Vue.js中,計算屬性（computed properties）是組件的重要組成部分,它們根據(jù)組件的數(shù)據(jù)自動計算新的值,并在數(shù)據(jù)變化時自動更新,本文將深入探討如何在Vue.js中監(jiān)聽計算屬性的變化,幫助你更好地理解Vue.js的響應式系統(tǒng),需要的朋友可以參考下2025-03-03
這篇文章主要介紹了vue ssr 指南詳讀,詳細的介紹了什么是SSR以及如何使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要給大家介紹了關于vue項目打包自動更新版本號且自動刷新緩存的相關資料,文中通過代碼及圖文介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了element中的el-upload附件上傳與附件回顯方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了iview在vue-cli3如何按需加載的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作
這篇文章主要介紹了全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue中如何使用方法、計算屬性或觀察者的相關知識，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vscode中Vue別名路徑提示的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
vue-router 源碼實現(xiàn)前端路由的兩種方式
這篇文章主要介紹了vue-router 源碼實現(xiàn)前端路由的兩種方式，主要介紹Hash 路由和History 路由，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
webpack vue項目開發(fā)環(huán)境局域網(wǎng)訪問方法
下面小編就為大家分享一篇webpack vue項目開發(fā)環(huán)境局域網(wǎng)訪問方法，具有很好的參考價值，希望對大家有所幫助，一起跟隨小編過來看看吧2018-03-03