feat: 更改全局inject fullpage

src/App.vue

@@ -8,11 +8,12 @@
 import FullPage from "./components/fullpage/fullpage.vue";
 import View from "./view/index.vue";
 import { isMobile } from "./utils/isMoblie.js";
-import { onMounted, ref, watchEffect, getCurrentInstance } from "vue";
+import { onMounted, ref, watchEffect, getCurrentInstance, provide } from "vue";
 import { emitter } from "./emitter.js";
 
 const instance = getCurrentInstance();
 const fullpage = ref();
+
 onMounted(() => {
   if (isMobile()) {
     document.body.className = "isMobile";
@@ -47,6 +48,7 @@ const options = ref({
   onLeave: onLeave,
   afterLoad: afterLoad,
 });
+provide("fullpage", fullpage);
 </script>
 
 <style scoped>

src/components/imgLoading.vue

@@ -17,26 +17,30 @@
 </template>
 
 <script setup>
-import { onMounted, ref, watchEffect } from "vue";
+import { onMounted, ref, watchEffect, inject } from "vue";
 import { emitter } from "../emitter.js";
 import { isMobile } from "../utils/isMoblie.js";
 import imgList from "../utils/loadImg";
+
+const fullpage = inject("fullpage");
+
 defineOptions({
   name: "img-loading",
 });
 onMounted(() => {
   loadImages(imgList);
 });
-const props = defineProps({
-  fullpage: Object,
-});
+// const props = defineProps({
+//   fullpage: Object,
+// });
 const emit = defineEmits(["changePer"]);
 const progress = ref(0);
 const framePro = ref(0);
 const imgPro = ref(0);
+
 watchEffect(() => {
-  if (props.fullpage && progress.value == 100) {
-    props.fullpage.api.setAllowScrolling(true);
+  if (fullpage.value && progress.value == 100) {
+    fullpage.value.api.setAllowScrolling(true);
   }
 });
 emitter.on("updatePress", (val) => {

src/components/navGuide.vue

@@ -46,13 +46,17 @@
   </Teleport>
 </template>
 <script setup>
-import { computed, ref, onMounted, onUnmounted } from "vue";
+import { computed, ref, onMounted, onUnmounted, inject } from "vue";
 import { emitter } from "../emitter.js";
 import { range } from "../utils/fn.js";
 const current = ref(0);
-const props = defineProps({
-  fullpage: Object,
-});
+
+// const props = defineProps({
+//   fullpage: Object,
+// });
+
+const fullpage = inject("fullpage");
+
 defineOptions({
   name: "nav-guide",
 });
@@ -76,8 +80,8 @@ onUnmounted(() => {
 });
 
 const handleSlideTo = (index) => {
-  if (props.fullpage) {
-    props.fullpage.api.moveTo(index);
+  if (fullpage.value) {
+    fullpage.value.api.moveTo(index);
   }
 };
 </script>

src/pages/section14-frame.vue

@@ -56,12 +56,15 @@ onMounted(() => {
     player.on("process", (p) => {
       process.value = p.process;
     });
-    player.on("scroll-prev", () => {
-      props.fullpage.api.moveSectionUp();
+    player.on("scroll-prev", (type) => {
+      if (type === 14) {
+        props.fullpage.api.moveSectionUp();
+      }
     });
-    player.on("scroll-next", () => {
-      console.warn("scroll-next");
-      props.fullpage.api.moveSectionDown();
+    player.on("scroll-next", (type) => {
+      if (type === 14) {
+        props.fullpage.api.moveSectionDown();
+      }
     });
   });
 });

src/pages/section14.vue

@@ -1,108 +1,37 @@
 <template>
-  <div class="section section14">
-    <canvas
-      class="canvas"
-      id="canvas-section-14"
-      v-show="isShowCanvas"
-    ></canvas>
-    <process-bar :process="process" />
-    <div class="can-scroll scroll-bar-14" @scroll="onPlayerScroll($event, 14)">
-      <div
-        style="width: 100%; height: 14000px"
-        class="scroll-bar-14-placeholder"
-      ></div>
+  <div class="section section14 chapter">
+    <div class="box">
+      <div class="chapter-num">第二章</div>
+      <div class="chapter-title">玉成中国</div>
+      <div class="chapter-intro">
+        <p>
+          在历史的洪流中，用玉加速了中华文明融合、聚变直至统一。玉礼器成为“最早的中国”形成过程中，不可或缺的政治信物。
+        </p>
+        <p>
+          夏文明崛起时，玉礼器是早期中国形成的重要标志。商与西周，玉礼制一脉相承，奠定了华夏礼仪的基石。东周至秦汉，个体的理性思维开始觉醒，玉器，逐步塑造、确立起中华民族独特的气质涵养与精神品格。
+        </p>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref, unref } from "vue";
-import processBar from "../components/processBar.vue";
 import { emitter } from "../emitter.js";
-import { usePlayer } from "../hooks/usecanvasPlayer.js";
-import { isMobile } from "../utils/isMoblie";
-
-const props = defineProps({
-  fullpage: Object,
-});
-
-const isShowCanvas = ref(false);
 
 const handler = ({ index: currentIndex, nextIndex }) => {
   const { index } = nextIndex;
   const { index: pre } = currentIndex;
-  const player = usePlayer();
   if (index === 13) {
-    props.fullpage.api.setAllowScrolling(false);
-    player.enableScroll(14);
-    if (pre === 12) {
-      console.log("autoplay");
-      player.autoPlay(0, 60);
-    }
-    isShowCanvas.value = true;
-  } else {
-    player.unEnableScroll();
-    isShowCanvas.value = false;
-    props.fullpage.api.setAllowScrolling(true);
+    console.log("hey");
+  }
+  if (pre === 12) {
+    console.log("order");
   }
 };
-const process = ref(0);
 
-onMounted(() => {
-  emitter.on("onLeave", handler);
-
-  emitter.on("loaded", () => {
-    const player = usePlayer();
-    player.on("process", (p) => {
-      process.value = p.process;
-    });
-    player.on("scroll-prev", (type) => {
-      if (type === 14) {
-        props.fullpage.api.moveSectionUp();
-      }
-    });
-    player.on("scroll-next", (type) => {
-      if (type === 14) {
-        props.fullpage.api.moveSectionDown();
-      }
-    });
-  });
-});
-onUnmounted(() => {
-  emitter.off("onLeave", handler);
-});
-const onPlayerScroll = (event, type) => {
-  const player = usePlayer();
-  player.manualScroll(event, type);
-};
+emitter.on("onLeave", handler);
 </script>
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
-
-.canvas {
-  position: absolute;
-  top: 0;
-  z-index: 0;
-}
-.can-scroll {
-  // background: white;
-  width: 100%;
-  overflow-y: scroll;
-  position: relative;
-  overflow-x: hidden;
-  z-index: 10;
-}
-.section {
-  position: relative;
-}
-.section14 {
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  line-height: 2;
-  color: #997946;
-  justify-content: center;
-  background: url(/img/section2/bg.webp) no-repeat center/cover;
-}
 </style>

src/pages/section3.vue

@@ -51,15 +51,13 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref, unref } from "vue";
+import { onMounted, onUnmounted, ref, inject, watchEffect, unref } from "vue";
 import processBar from "../components/processBar.vue";
 import { emitter } from "../emitter.js";
 import { usePlayer } from "../hooks/usecanvasPlayer.js";
 import { isMobile } from "../utils/isMoblie";
 
-const props = defineProps({
-  fullpage: Object,
-});
+const fullpage = inject("fullpage");
 
 const isShowCanvas = ref(false);
 
@@ -68,8 +66,7 @@ const handler = ({ index: currentIndex, nextIndex }) => {
   const { index: pre } = currentIndex;
   const player = usePlayer();
   if (index === 2) {
-    // console.log("currentIndex", currentIndex);
-    props.fullpage.api.setAllowScrolling(false);
+    fullpage.value.api.setAllowScrolling(false);
     player.enableScroll(3);
     if (pre === 1) {
       console.log("autoplay");
@@ -80,7 +77,7 @@ const handler = ({ index: currentIndex, nextIndex }) => {
   } else {
     player.unEnableScroll();
     isShowCanvas.value = false;
-    props.fullpage.api.setAllowScrolling(true);
+    fullpage.value.api.setAllowScrolling(true);
   }
 };
 const process = ref(0);

src/view/index.vue

@@ -1,10 +1,10 @@
 <template>
   <mouse-tips />
-  <nav-guide :fullpage="fullpage" />
-  <loadImg :fullpage="fullpage" />
+  <nav-guide />
+  <loadImg />
   <section1 />
   <section2 />
-  <section3 :fullpage="fullpage" />
+  <section3 />
   <section4 />
   <section5 />
   <section6 />
@@ -15,7 +15,7 @@
   <section11 />
   <section12 />
   <section13 />
-  <section14 :fullpage="fullpage" />
+  <section14 />
   <section15 />
   <section16 />
   <section17 />
@@ -85,14 +85,14 @@ const setting = [
     // total: isMobile() ? 900 : 300,
     total: isMobile() ? 940 : 331,
   },
-  {
-    name: "金蝉玉叶",
-    canvasId: "canvas-section-14",
-    sectionType: 14,
-    imageUrl: isMobile() ? "./img/canvas/tt" : "./img/canvas/rsy",
-    dots: [],
-    total: isMobile() ? 300 : 297,
-  },
+  // {
+  //   name: "金蝉玉叶",
+  //   canvasId: "canvas-section-14",
+  //   sectionType: 14,
+  //   imageUrl: isMobile() ? "./img/canvas/tt" : "./img/canvas/rsy",
+  //   dots: [],
+  //   total: isMobile() ? 300 : 297,
+  // },
 ];
 
 defineOptions({