feat: scroll page keep progress

packages/pc/src/stores/base.js

@@ -16,7 +16,7 @@ const Video1 = `${BASE_URL}animations/2.mp4`;
 const Video2 = `${BASE_URL}animations/3.mp4`;
 const ImgAnimations = Array.from(
   { length: 125 },
-  (_, index) => `${BASE_URL}animations/过场1/过场1_00${index + 147}.png`
+  (_, index) => `${BASE_URL}animations/过场1/过场1_00${index + 147}.png`,
 );
 
 export const RESOURCE_LIST = [
@@ -45,5 +45,10 @@ export const useBaseStore = defineStore("base", () => {
     mediaUrlMap.value = list;
   };
 
-  return { mediaUrlMap, setMediaUrlMap };
+  const scrollTranslate = ref(0);
+  const setScrollTranslate = (t) => {
+    scrollTranslate.value = t;
+  };
+
+  return { mediaUrlMap, setMediaUrlMap, scrollTranslate, setScrollTranslate };
 });

packages/pc/src/views/Scroll/index.vue

@@ -2,6 +2,7 @@
   <div class="scroll">
     <swiper
       :modules="[FreeMode, Mousewheel]"
+      @swiper="onSwiper"
       :slides-per-view="'auto'"
       :space-between="0"
       :free-mode="true"
@@ -281,7 +282,7 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onBeforeUnmount, nextTick } from "vue";
 import { useBaseStore } from "@/stores/base";
 import { storeToRefs } from "pinia";
 import { Swiper, SwiperSlide } from "swiper/vue";
@@ -318,7 +319,7 @@ import VideoAni from "@/components/VideoAni/index.vue";
 
 const BASE_URL = import.meta.env.BASE_URL;
 const baseStore = useBaseStore();
-const { mediaUrlMap } = storeToRefs(baseStore);
+const { mediaUrlMap, scrollTranslate } = storeToRefs(baseStore);
 const showVideo = ref(false);
 const model1Type = ref(0);
 const showGame1 = ref(false);
@@ -329,10 +330,27 @@ const showGame5 = ref(false);
 const showGame6 = ref(false);
 const showGame7 = ref(false);
 const showGame8 = ref(false);
+const swiperRef = ref(null);
 
 const handleSaveType = (type) => {
   model1Type.value = type + 1;
 };
+
+const onSwiper = (swiper) => {
+  swiperRef.value = swiper;
+
+  nextTick(() => {
+    if (swiperRef.value) {
+      swiperRef.value.setTranslate(scrollTranslate.value || 0);
+    }
+  });
+};
+
+onBeforeUnmount(() => {
+  if (swiperRef.value && swiperRef.value.getTranslate) {
+    baseStore.setScrollTranslate(swiperRef.value.getTranslate() || 0);
+  }
+});
 </script>
 
 <style scoped lang="scss">