feat: 保存

src/App.vue

@@ -16,6 +16,7 @@ onMounted(() => {
   watchEffect(() => {
     if (instance.proxy.$refs.fullpage) {
       fullpage.value = instance.proxy.$refs.fullpage;
+      fullpage.value.api.setAllowScrolling(false);
     }
   });
 });

src/components/navGuide.vue

@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body">
     <ul class="nav" v-show="current != 0">
-      <li data-menuanchor="section2" class="active" @click="handleSlideTo(2)">
+      <li data-menuanchor="section2" class="active" @click="handleSlideTo(1)">
         <i></i>
         <div class="title">
           <h3>首页</h3>

src/pages/section3.vue

@@ -158,9 +158,17 @@ onMounted(() => {
     console.log("所有图片完成");
   });
   player.on("updatePress", (p) => {
-    console.log("updatePress", p);
     emitter.emit("updatePress", p);
   });
+  player.on("scroll-prev", () => {
+    console.log("scroll-prev");
+    // props.fullpage.api.moveSectionDown()
+    // emitter.emit("scroll-prev", p);
+  });
+  player.on("scroll-next", () => {
+    console.log("scroll-next");
+    props.fullpage.api.moveSectionUp()
+  });
   window.player = player;
 });
 onUnmounted(() => {

src/utils/canvasPlayer.js

@@ -62,9 +62,7 @@ export class CanvasPlayer extends Mitt {
         (pre, current) => pre + current["total"],
         0
       );
-      console.log("total", total);
       Array.from(this.setting).forEach((item, framekey) => {
-        console.log("item", item, framekey);
         const base = [];
         const clip = {
           id: item.sectionType,
@@ -117,18 +115,21 @@ export class CanvasPlayer extends Mitt {
   enableScroll(type = 0) {
     this.canScroll = true;
     this.currentType = type;
-    // this.initFirstFrame();
+    this.initFirstFrame();
   }
   unEnableScroll() {
     this.canScroll = false;
   }
   manualScroll(event, type) {
+    if (!this.canScroll) {
+      this.enableScroll(type);
+    }
     let lastKnownScrollPosition = 0;
     let deltaY = 0;
     const scrollY = event.target.scrollTop;
-    this.enableScroll(type);
-    deltaY = scrollY - lastKnownScrollPosition;
 
+    deltaY = scrollY - lastKnownScrollPosition;
+    console.log("deltaY", deltaY);
     // this.watchScroll(event);
   }
   watchScroll(event) {
@@ -170,12 +171,18 @@ export class CanvasPlayer extends Mitt {
         return;
       }
       if (na) {
-        console.log("1111");
         this.currentFrame++;
+        // console.log("111", this.currentFrame);
+        if (this.currentFrame === clip.total) {
+          this.emit("scroll-next");
+        }
         this.reDraw(this.currentFrame, this.currentType);
       } else {
-        console.log("222");
         this.currentFrame--;
+        // console.log("222", this.currentFrame);
+        if (this.currentFrame === 0) {
+          this.emit("scroll-prev");
+        }
         this.reDraw(this.currentFrame, this.currentType);
       }
       const process = Number(this.currentFrame / clip.total) * 100;
@@ -215,6 +222,7 @@ export class CanvasPlayer extends Mitt {
   }
   initFirstFrame() {
     if (this.currentType) {
+      console.log("initFirstFrame", initFirstFrame);
       const frameItem = this.frames.find(
         (item) => item.id == this.currentType && item.index == 1
       );

src/view/index.vue

@@ -1,7 +1,7 @@
 <template>
   <mouse-tips />
   <nav-guide :fullpage="fullpage" />
-  <section1></section1>
+  <section1 />
   <section2 />
   <section3 :fullpage="fullpage" />
   <section4 />