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