Merge branch 'master' of http://192.168.0.115:3000/zhangyupeng/fullpage-show

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

@@ -1,6 +1,6 @@
 <template>
   <div class="section section3" data-anchor="section3">
-    <canvas id="canvas"></canvas>
+    <canvas id="canvas" v-show="isShowCanvas"></canvas>
 
     <div class="can-scroll" style="" @scroll.stop="onPlayerScroll($event, 3)">
       <div style="width: 100%; height: 14000px" class="scroll-bar-3"></div>
@@ -44,7 +44,7 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import { emitter } from "../emitter.js";
 import { CanvasPlayer } from "../utils/canvasPlayer.js";
 const setting = [
@@ -140,14 +140,18 @@ const props = defineProps({
 
 const player = new CanvasPlayer("canvas", setting);
 
+const isShowCanvas = ref(false);
+
 const handler = ({ index: currentIndex, nextIndex }) => {
   const { index } = nextIndex;
   if (index === 2) {
     console.log("fullpage", props.fullpage.api);
     props.fullpage.api.setAllowScrolling(false);
     player.enableScroll(3);
+    isShowCanvas.value = true;
   } else {
     player.unEnableScroll();
+    isShowCanvas.value = false;
     props.fullpage.api.setAllowScrolling(true);
   }
 };
@@ -158,9 +162,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,30 +115,40 @@ 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;
 
+    const clip = Array.from(this.clips).find(
+      (item) => item.id === this.currentType
+    );
+    const deltaHeight = clip.total * 100 - window.innerHeight;
+    const prcess = scrollY / deltaHeight;
+    const frame = Math.floor(clip.total * prcess);
+    this.currentFrame = frame;
+    this.reDraw(this.currentFrame, this.currentType);
     // this.watchScroll(event);
   }
   watchScroll(event) {
     if (this.canScroll) {
+      if (this.currentFrame < 0) {
+        this.currentFrame = 0;
+      }
       if (event.deltaY > 0) {
-        this.currentFrame < 1
-          ? (this.currentFrame = 1)
-          : this.autoIncrement(true);
+        this.autoIncrement(true);
       } else {
-        this.currentFrame < 1
-          ? (this.currentFrame = 1)
-          : this.autoIncrement(false);
+        this.autoIncrement(false);
       }
     }
     this.initClipScrollheight();
@@ -161,7 +169,7 @@ export class CanvasPlayer extends Mitt {
   }
 
   autoIncrement(na = true) {
-    if (this.currentFrame > 0) {
+    if (this.currentFrame >= 0) {
       const clip = Array.from(this.clips).find(
         (item) => item.id === this.currentType
       );
@@ -170,12 +178,18 @@ export class CanvasPlayer extends Mitt {
         return;
       }
       if (na) {
-        console.log("1111");
-        this.currentFrame++;
+        this.currentFrame += 1;
+        // 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--;
+        this.currentFrame -= 1;
+        // 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 +229,7 @@ export class CanvasPlayer extends Mitt {
   }
   initFirstFrame() {
     if (this.currentType) {
+      console.log("initFirstFrame");
       const frameItem = this.frames.find(
         (item) => item.id == this.currentType && item.index == 1
       );

src/view/index.vue

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