Vue項(xiàng)目返回頁面保持上次滾動(dòng)狀態(tài)方式
更新時(shí)間：2025年04月28日 15:37:41 作者：trabecula_hj
這篇文章主要介紹了Vue項(xiàng)目返回頁面保持上次滾動(dòng)狀態(tài)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue項(xiàng)目返回頁面保持上次滾動(dòng)狀態(tài)
使用背景：
- 首頁-water-collection 當(dāng)前頁/列表頁-water-collection-list
- 當(dāng)從列表頁跳轉(zhuǎn)詳情頁面后再返回列表頁面需要保持在上次滾動(dòng)狀態(tài)
- 每次從首頁進(jìn)入列表后都要滾動(dòng)到頂部
一、設(shè)置列表頁keepAlive緩存
{
path: '/water-collection/list',
name: 'water-collection-list',
component: () =>
import('@/views/water-collection/water-list.vue'),
meta: { title: '概要情況',keepAlive:true }
}二、第一次進(jìn)入列表頁面時(shí)在mounted生命周期中監(jiān)聽滾動(dòng)事件
// mounted
this.$nextTick(() => {
this.tableScorll = this.$refs.tableScorll;
this.tableScorll.addEventListener("scroll", this.handleScroll);
});// 滾動(dòng)事件，記錄滾動(dòng)位置并賦值給scrollTop
handleScroll() {
this.scrollTop = this.tableScorll.scrollTop;
},三、第二次之后進(jìn)入在activated生命周期中監(jiān)聽滾動(dòng)事件
// activated
this.$nextTick(() => {
this.tableScorll = this.$refs.tableScorll;
this.tableScorll.addEventListener("scroll", this.handleScroll);
});四、beforeRouteEnter判斷是進(jìn)入頁面還是返回頁面
1. 路由判斷
beforeRouteEnter(to, from, next) {
next((vm) => {
if (from.name === "water-collection") {
vm.isBack = false;
} else {
vm.isBack = true;
}
});
},2. 返回頁面滾動(dòng)到上次位置，進(jìn)入頁面則滾動(dòng)到頂部位置
// activated
if (this.isBack) {
if (this.scrollTop > 0) {
this.tableScorll.scrollTo(0, this.scrollTop);
}
} else {
this.scrollTop = 0;
this.tableScorll&&this.tableScorll.scrollTo(0, 0);
}3. 離開頁面清除滾動(dòng)事件監(jiān)聽
deactivated() {
this.tableScorll.removeEventListener("scroll", this.handleScroll);
},總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue使用elementUI分頁如何實(shí)現(xiàn)切換頁面時(shí)返回頁面頂部
- vue scroller返回頁面記住滾動(dòng)位置的實(shí)例代碼
- 基于Vue3與免費(fèi)滿血版DeepSeek實(shí)現(xiàn)無限滾動(dòng)+懶加載+瀑布流模塊及優(yōu)化過程
- vue3實(shí)現(xiàn)長(zhǎng)列表虛擬滾動(dòng)的示例代碼
- Vue 封裝公告滾動(dòng)的方法
- Vue3實(shí)現(xiàn)動(dòng)態(tài)高度的虛擬滾動(dòng)列表的示例代碼
- vue虛擬滾動(dòng)/虛擬列表簡(jiǎn)單實(shí)現(xiàn)示例
相關(guān)文章
Vue計(jì)算屬性實(shí)現(xiàn)成績(jī)單
這篇文章主要為大家詳細(xì)介紹了Vue計(jì)算屬性實(shí)現(xiàn)成績(jī)單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue實(shí)現(xiàn)多個(gè)數(shù)組合并
這篇文章主要介紹了vue實(shí)現(xiàn)多個(gè)數(shù)組合并方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue實(shí)現(xiàn)漸變色進(jìn)度條的代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)漸變色進(jìn)度條的代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了Vue的自定義事件內(nèi)容分發(fā)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要為大家詳細(xì)介紹了Vue.js開發(fā)環(huán)境快速搭建教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
VuePress在build打包時(shí)window?document?is?not?defined問題解決
這篇文章主要為大家介紹了VuePress在build打包時(shí)window?document?is?not?defined問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
Vue中設(shè)置背景圖片和透明度的簡(jiǎn)單方法
在做項(xiàng)目的時(shí)候常需要設(shè)置背景圖片和透明度,下面這篇文章主要給大家介紹了關(guān)于Vue中設(shè)置背景圖片和透明度的簡(jiǎn)單方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要給大家介紹了關(guān)于Vue中如何定義數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了解決vite打包后白屏之router-view不生效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue3+Echarts頁面加載不渲染顯示空白頁面的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10