滚动条定位记录

client_h5/.env.dev

@@ -6,4 +6,4 @@ VITE_BASE_URL='http://10.10.10.7:18080'
 # File上传路径
 VITE_FILE_BASE_URI='/admin-api/infra/file'
 
-# VITE_AUTHORIZATION='fd30a57b78364448b9d13eb0719ac151'
+VITE_AUTHORIZATION='ee616fbb477942fc975bc7a46e00a9bc'

client_h5/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1">
-    <script src='https://cdn.bootcss.com/vConsole/3.3.2/vconsole.min.js'></script>
+    <!-- <script src='https://cdn.bootcss.com/vConsole/3.3.2/vconsole.min.js'></script> -->
     <script type="text/javascript">
       // window.vConsole = new window.VConsole()
       window.locationBaseUrl = "/html_h5"

client_h5/src/App.vue

@@ -1,9 +1,64 @@
 <script setup lang="ts">
+type RouteName = string[]
+/***
+ * 需要缓存滚动条的配置
+ * 1、在router路由配置文件中设置name属性；
+ * 2、在相应组件文件下定义defineOptions({name: string})
+ */
+const keepAlives: RouteName = ['HandleCenter', 'Notice', 'MyDailyLogs']
+const keepAliveIncludes = ref<RouteName>([])
+let scrollTopMap = ref<Record<string, number>>({})
+
+const router = useRouter()
+let timer: any = null;
+
+window.addEventListener("scroll", () => {
+  const routeName: string = router.currentRoute.value.name as string;
+  if (keepAliveIncludes.value.includes(routeName)) {
+    const top: number = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
+    scrollTopMap.value[routeName] = top;
+  }
+})
+watch(
+  () => router.currentRoute.value,
+  (newValue: any) => {
+    if (timer != null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    const routeName = newValue.name;
+    if (routeName === 'Home') {
+      keepAliveIncludes.value = []
+      scrollTopMap.value = {}
+      return
+    } else {
+      if (!keepAliveIncludes.value.includes(routeName)) {
+        keepAliveIncludes.value.push(routeName);
+      }
+    }
+    if (keepAlives.includes(routeName)) {
+      if (timer == null) {
+        timer = setTimeout(() => {
+          window.scrollTo({
+            top: (scrollTopMap.value[routeName] && scrollTopMap.value[routeName] > 0) ? scrollTopMap.value[routeName]  : 0
+          });
+        }, 0)
+      } 
+    }
+  }
+)
+
 </script>
 
 <template>
   <div class="app">
-    <RouterView />
+    <RouterView>
+      <template #default="{ Component, route }">
+        <keep-alive :include="keepAliveIncludes">
+          <component :is="Component" :key="route.fullPath" />
+        </keep-alive>
+      </template>
+    </RouterView>
   </div>
 </template>
 

client_h5/src/pages/handleCenter/index.vue

@@ -104,6 +104,10 @@ import { getHandlerCaseCenterList, getHandlerCaseCenterCount, getFlowTemplateTre
 import { listToTree } from '@/utils/tree';
 import { formatDateTime } from '@/utils/common';
 
+defineOptions({
+  name: 'HandleCenter'
+})
+
 const items = ref([]);
 const loading = ref(false);
 const finished = ref(false);
@@ -115,6 +119,7 @@ const onRefresh = () => {
   queryHandlerCaseCenterCount();
   queryHandlerCaseCenterList(true);
 };
+
 const onLoad = () => {
   loading.value = true;
   pageData.value.page = pageData.value.page + 1

client_h5/src/pages/myLogs/Daily/MyLogs.vue

@@ -25,6 +25,9 @@ import { http } from "../http";
  * @description 日报详情
  */
 
+defineOptions({
+  name: 'MyDailyLogs'
+})
 const loading = ref(false);
 
 // 限制日期范围

client_h5/src/pages/notice/index.vue

@@ -42,6 +42,9 @@
 import { getSimpleUserMap } from '@/service/user'
 import reqest from "@/utils/request";
 
+defineOptions({
+  name: 'Notice'
+})
 const loading = ref(false);
 const finished = ref(false);
 const refreshing = ref(false);

client_h5/src/router/routes.ts

@@ -7,7 +7,7 @@ const routes: RouteRecordRaw[] = [
     children: [
       {
         path: "home",
-        name: "Homoe",
+        name: "Home",
         meta: {
           title: "首页",
         },