亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2018年08月31日 08:39:19   作者：羞羞的鐵拳  
今天小編就為大家分享一篇vue通過滾動行為實現(xiàn)從列表到詳情,返回列表原位置的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

vue項目滾動行為

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

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

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

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

實現(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>

實現(xiàn)方式二：監(jiān)聽scrollTop, js原始寫法(組件同樣需要設(shè)置緩存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鉤子里記錄當(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通過滾動行為實現(xiàn)從列表到詳情,返回列表原位置的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論