feat: 保存滚动位置

sub-store-org · Jan 18, 2024 · 69a2d06 · 69a2d06
1 parent b528190
commit 69a2d06
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.14.76",
+  "version": "2.14.77",
   "private": true,
   "scripts": {
     "dev": "vite --host",

diff --git a/src/components/TabBar.vue b/src/components/TabBar.vue
@@ -32,17 +32,20 @@
   const routeList = ['/subs', '/files', '/sync', '/my'];
   const activeTab = ref(routeList.indexOf(route.path));
 
-  onBeforeRouteUpdate((to, from, next) => {
-    activeTab.value = routeList.indexOf(to.path);
-    next();
-  });
+
 
   const globalStore = useGlobalStore();
   const { bottomSafeArea, istabBar, istabBar2, env } = storeToRefs(globalStore);
   const style = {
     height: `${bottomSafeArea.value + 12 + 44}px`,
     paddingBottom: bottomSafeArea.value + 'px',
   };
+  onBeforeRouteUpdate((to, from, next) => {
+    activeTab.value = routeList.indexOf(to.path);
+    // const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+    // globalStore.setSavedPositions(from.path, { left: 0, top: scrollTop })
+    next();
+  });
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -46,8 +46,16 @@ const router = createRouter({
       }
     }
     if (savedPosition) {
+      // console.log(`接受到 ${to.path} savedPosition 滚动位置：${savedPosition?.top}`)
       return savedPosition
     } else {
+      if (globalStore !== null && to?.meta?.needTabBar) {
+        const savedPositions = toRaw(globalStore.savedPositions);
+        if (savedPositions[to.path]) {
+          // console.log(`读取到 ${to.path} 保存的滚动位置：${savedPositions[to.path]?.top}`)
+          return savedPositions[to.path]
+        }
+      }
       return { top: 0, left: 0 }
     }
   },
@@ -180,6 +188,14 @@ const router = createRouter({
 //   }
 //   return true;
 // });
+router.beforeEach((to, from) => {
+  if (from?.meta?.needTabBar) {
+    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+    // console.log(`保存 ${from.path} 滚动位置：${scrollTop}`)
+    globalStore.setSavedPositions(from.path, { left: 0, top: scrollTop })
+  }
+  return true
+})
 router.beforeResolve(async to => {
   // document.body.classList.remove('nut-overflow-hidden');
   // 路由跳转时查询环境，决定是否更新数据

diff --git a/src/store/global.ts b/src/store/global.ts
@@ -24,6 +24,7 @@ export const useGlobalStore = defineStore('globalStore', {
       istabBar: localStorage.getItem('istabBar') === '1',
       istabBar2: localStorage.getItem('istabBar2') === '1',
       ishostApi: getHostAPIUrl(),
+      savedPositions: {},
     };
   },
   getters: {},
@@ -118,5 +119,8 @@ export const useGlobalStore = defineStore('globalStore', {
         this.env = res.data.data;
       }
     },
+    setSavedPositions(key: string, value: any) {
+      this.savedPositions[key] = value;
+    },
   },
 });
diff --git a/src/types/store/globalStore.d.ts b/src/types/store/globalStore.d.ts
@@ -14,6 +14,7 @@ interface GlobalStoreState {
   istabBar: boolean;
   istabBar2: boolean;
   ishostApi: string;
+  savedPositions: any;
 }
 
 interface ENV {