Vue項目返回頁面保持上次滾動狀態(tài)方式
更新時間：2025年04月28日 15:37:41 作者：trabecula_hj
這篇文章主要介紹了Vue項目返回頁面保持上次滾動狀態(tài)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue項目返回頁面保持上次滾動狀態(tài)
使用背景：
- 首頁-water-collection 當前頁/列表頁-water-collection-list
- 當從列表頁跳轉詳情頁面后再返回列表頁面需要保持在上次滾動狀態(tài)
- 每次從首頁進入列表后都要滾動到頂部
一、設置列表頁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);
},總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
最近在用VUE寫大屏頁面,遇到屏幕自適應問題,下面這篇文章主要給大家介紹了關于vue大屏自適應的實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
對vue v-if v-else-if v-else 的簡單使用詳解
今天小編就為大家分享一篇對vue v-if v-else-if v-else 的簡單使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
cesium開發(fā)之如何在vue項目中使用cesium,使用離線地圖資源
這篇文章主要介紹了cesium開發(fā)之如何在vue項目中使用cesium,使用離線地圖資源問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue是一套用于構建前后端分離的框架。剛開始是由國內優(yōu)秀選手尤雨溪開發(fā)出來的，目前是全球“最”流行的前端框架。使用vue開發(fā)網(wǎng)頁很簡單，并且技術生態(tài)環(huán)境完善，社區(qū)活躍，是前后端找工作必備技能！下面來看看其得安裝及使用方法吧2021-10-10
這篇文章主要介紹了Vue實現(xiàn)直播功能,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
詳解基于Vue的支持數(shù)據(jù)雙向綁定的select組件
這篇文章主要介紹了詳解基于Vue的支持數(shù)據(jù)雙向綁定的select組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了vue js秒轉天數(shù)小時分鐘秒的實例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
vue?element?el-select下拉滾動加載的方法
很多朋友都遇到這樣一個問題在使用vue+element的el-select下拉框加載返回數(shù)據(jù)太多時，會造成卡頓，用戶體驗欠佳，這篇文章主要介紹了vue?element?el-select下拉滾動加載方法,需要的朋友可以參考下2022-11-11
vue用@表示src文件夾，引入時找文件路徑更方便,下面這篇文章主要給大家介紹了關于vue配置根目錄(用@代表src目錄)的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
VUE在for循環(huán)里面根據(jù)內容值動態(tài)的加入class值的方法
這篇文章主要介紹了VUE在for循環(huán)里面根據(jù)內容值動態(tài)的加入class值的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08