vue中進(jìn)入詳情頁記住滾動(dòng)位置的方法(keep-alive)
更新時(shí)間：2018年09月21日 11:12:04 作者：徹夜不歸
今天小編就為大家分享一篇vue中進(jìn)入詳情頁記住滾動(dòng)位置的方法(keep-alive)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
> 有時(shí)業(yè)務(wù)提出這樣一個(gè)需求 就是從商品頁面進(jìn)入到列表詳情頁 要保存當(dāng)前滾動(dòng)的位置，這里我就想到了keep-alive
1.首先在路由中引入需要的模塊
{
path: ‘/scrollDemo',
name: ‘scrollDemo',
meta: {
keepAlive: true // 需要緩存
},
component: resolve => { require([‘../view/scrollDemo.vue'], resolve) }
}
2.在App.vue中設(shè)置緩存組件
<keep-alive> // 緩存組件跳轉(zhuǎn)的頁面
<router-view v-if="$route.meta.keepAlive" class="ui-view" transition-mode="out-in"></router-view>
</keep-alive>
// 非緩存組件跳轉(zhuǎn)頁面
<router-view v-if="!$route.meta.keepAlive" class="ui-view" transition-mode="out-in"></router-view>
3.在頁面注冊對應(yīng)的事件
1. 在return中定義一個(gè)初始值 scroll
2. 在mouted中 ，mouted中的方法代表dom已經(jīng)加載完畢
window.addEventListener('scroll', this.handleScroll);
3.methods 用于存放頁面函數(shù)
handleScroll () {
this.scroll = document.documentElement && document.documentElement.scrollTop
console.log(this.scroll)
}
4. activated 為keep-alive加載時(shí)調(diào)用
activated() {
if(this.scroll > 0){
window.scrollTo(0, this.scroll);
this.scroll = 0;
window.addEventListener('scroll', this.handleScroll);
}
}
5.deactivated 頁面退出時(shí)關(guān)閉事件 防止其他頁面出現(xiàn)問題
deactivated(){
window.removeEventListener('scroll', this.handleScroll);
}
以上這篇vue中進(jìn)入詳情頁記住滾動(dòng)位置的方法(keep-alive)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何在 Vue 中使用 JSX，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-02-02
vue3中g(shù)etCurrentInstance不推薦使用及在＜script?setup＞中獲取全局內(nèi)容的三種方式
這篇文章主要給大家介紹了關(guān)于vue3中g(shù)etCurrentInstance不推薦使用及在＜script?setup＞中獲取全局內(nèi)容的三種方式,文中通過介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02
在Vue3中,ref提供了訪問組件內(nèi)DOM元素和子組件實(shí)例的方法,防抖是一種限制函數(shù)調(diào)用頻率的方法,即在一定時(shí)間內(nèi)多次觸發(fā)同一個(gè)函數(shù),只執(zhí)行最后一次觸發(fā)的函數(shù),本文將給大家介紹了Vue3如何利用自定義ref實(shí)現(xiàn)防抖,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了Vue通過ref獲取不到$refs問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了iview Upload組件多個(gè)文件上傳的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue 授權(quán)獲取微信openId操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue實(shí)現(xiàn)半自動(dòng)打字機(jī)特效
本文主要介紹了Vue實(shí)現(xiàn)半自動(dòng)打字機(jī)特效,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
vue2中基于vue-simple-upload實(shí)現(xiàn)文件分片上傳組件功能
這篇文章主要介紹了vue2中基于vue-simple-upload的文件分片上傳組件,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
使用vue-cli3 創(chuàng)建vue項(xiàng)目并配置VS Code 自動(dòng)代碼格式化 vue語法高亮問題
這篇文章主要介紹了使用vue-cli3 創(chuàng)建vue項(xiàng)目，并配置VS Code 自動(dòng)代碼格式化 vue語法高亮問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
vue+element-ui動(dòng)態(tài)生成多級表頭的方法
今天小編就為大家分享一篇vue+element-ui動(dòng)態(tài)生成多級表頭的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08