feat: 保存

src/assets/style/index.scss

@@ -386,13 +386,13 @@ body {
   width: 1.625rem;
   height: 1.625rem;
   display: inline-block;
-  background: url(#/img/webp/xnzt-btn.webp) no-repeat center/contain;
+  background: url(/img/webp/xnzt-btn.webp) no-repeat center/contain;
 }
 .section-erweima .infoicon {
   margin-top: 7vh;
   width: 2rem;
   height: 2rem;
-  background: url(#/img/infoicon.png) no-repeat center/contain;
+  background: url(/img/infoicon.png) no-repeat center/contain;
   cursor: pointer;
 }
 .section-erweima .curatorialinfo {

src/pages/section31.vue

@@ -31,5 +31,5 @@
 <script setup></script>
 
 <style lang="scss" scoped>
-@import "/src/assets/style/index.scss";
+@import "../assets/style/index.scss";
 </style>

src/utils/canvasPlayer.js

@@ -7,7 +7,6 @@ class Mitt {
     Object.assign(this, mitt(e));
   }
 }
-let timer, updateTimer;
 export class CanvasPlayer extends Mitt {
   constructor(canvasId, setting) {
     super();
@@ -186,20 +185,20 @@ export class CanvasPlayer extends Mitt {
       }
     }
 
-    if (timer) {
-      clearTimeout(timer);
-      timer = null;
+    if (this.mainScrolltimer) {
+      clearTimeout(this.mainScrolltimer);
+      this.mainScrolltimer = null;
     }
-    if (updateTimer) {
-      clearTimeout(updateTimer);
-      updateTimer = null;
+    if (this.mainScrollfinishTimer) {
+      clearTimeout(this.mainScrollfinishTimer);
+      this.mainScrollfinishTimer = null;
     }
     // console.log("startFrame", dis, this.currentFrame, this.movingFrame);
     console.log(
       `scrollY:${scrollY},currentFrame:${this.currentFrame},dis: ${dis}, move:${this.movingFrame} `
     );
 
-    timer = setTimeout(() => {
+    this.mainScrolltimer = setTimeout(() => {
       this.scrollAni = gsap.timeline();
       this.scrollAni.to(this, {
         movingFrame: dis,
@@ -215,7 +214,7 @@ export class CanvasPlayer extends Mitt {
         },
         onStart: () => {},
         onComplete: () => {
-          updateTimer = setTimeout(this.toRunPatch, 0);
+          this.mainScrollfinishTimer = setTimeout(this.toRunPatch, 0);
 
           // if (isMobile()) {
           if (this.scrollAni) {
@@ -302,12 +301,10 @@ export class CanvasPlayer extends Mitt {
       type: this.currentType,
     });
   }
-  test() {
-    const height = this.getFrameScrollTop(this.currentFrame);
-    console.log("target-height", height);
-    document.querySelector(".scroll-bar-3").scrollTop = height;
+  reset() {
+    this.currentFrame = 0;
+    this.movingFrame = 0;
   }
-
   play(frame) {
     console.log("play", frame);
     const height = this.getFrameScrollTop(frame);
@@ -374,6 +371,7 @@ export class CanvasPlayer extends Mitt {
     if (!this.isInit.includes(this.currentType)) {
       if (this.currentType) {
         this.isInit.push(this.currentType);
+        this.reset();
         const frameItem = this.frames.find(
           (item) => item.id == this.currentType && item.index == 1
         );
@@ -385,14 +383,15 @@ export class CanvasPlayer extends Mitt {
           this.isRendering = false;
 
           if (this.currentFrame === 0 && this.movingFrame === 0) {
-            this.emit("scroll-prev");
+            // this.emit("scroll-prev");
+            this.scrollPre();
           }
           if (
             this.currentFrame === frameItem.total &&
             this.movingFrame === frameItem.total &&
             !isMobile()
           ) {
-            this.emit("scroll-next");
+            this.scrollNext();
           }
           //
           if (
@@ -401,7 +400,7 @@ export class CanvasPlayer extends Mitt {
             isMobile()
           ) {
             console.log("移动端下一叶");
-            this.emit("scroll-next");
+            this.scrollNext();
           }
           console.warn("scroll done", this.currentFrame, this.movingFrame);
         };
@@ -420,5 +419,15 @@ export class CanvasPlayer extends Mitt {
     }
   }
 
+  scrollPre = debounce(() => {
+    this.emit("scroll-prev");
+    console.log("scroll-prev");
+    this.reset();
+  }, 500);
+
+  scrollNext = debounce(() => {
+    this.emit("scroll-next");
+    console.log("scroll-next");
+  }, 500);
   update() {}
 }

vite.config.js

@@ -13,6 +13,9 @@ function pathResolve(dir) {
 export default ({ mode }) =>
   defineConfig({
     base: loadEnv(mode, process.cwd()).VITE_PUBLIC_DIR,
+    server: {
+      port: 3611,
+    },
     plugins: [
       vue(),
       UnoCSS(),