vue通過滾動(dòng)行為實(shí)現(xiàn)從列表到詳情,返回列表原位置的方法

更新時(shí)間：2018年08月31日 08:39:19 作者：羞羞的鐵拳

今天小編就為大家分享一篇vue通過滾動(dòng)行為實(shí)現(xiàn)從列表到詳情,返回列表原位置的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

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

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

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

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

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

實(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(即從列表頁進(jìn)入詳情頁)

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通過滾動(dòng)行為實(shí)現(xiàn)從列表到詳情,返回列表原位置的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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