fullpage-show/src/pages/section1.vue

<template>
  <div class="section section1">
    <canvas class="canvas" id="canvas-section-1" v-show="isShowCanvas"></canvas>
    <process-bar :process="process" />
    <div
      class="can-scroll scroll-bar-1"
      style=""
      @scroll.capture="onPlayerScroll($event, 1)"
    >
      <div
        style="width: 100%; height: 14000px"
        class="scroll-bar-1-placeholder"
      ></div>
    </div>
  </div>
</template>

<script setup>
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 fullpage = inject("fullpage");

const isShowCanvas = ref(false);

const handler = ({ index: currentIndex, nextIndex }) => {
  const { index } = nextIndex;
  const { index: pre } = currentIndex;
  const player = usePlayer();
  if (index === 0) {
    fullpage.value.api.setAllowScrolling(false);
    player.enableScroll(1);
    if (pre === 1) {
      console.log("autoplay");
      // player.autoPlay(0, 60);
    }

    isShowCanvas.value = true;
  } else {
    player.unEnableScroll();
    isShowCanvas.value = false;
    fullpage.value.api.setAllowScrolling(true);
  }
};
const process = ref(0);

onMounted(() => {
  if (isMobile()) {
    var vcon = new window.VConsole();
  }
  emitter.on("onLeave", handler);

  emitter.on("loaded", () => {
    const player = usePlayer();
    if (isMobile()) {
      console.log("fitToSection1");
      fullpage.value.api.fitToSection();
    }
    setTimeout(() => {
      isShowCanvas.value = true;
      fullpage.value.api.setAllowScrolling(false);
      player.enableScroll(1);
      // player.autoPlay(0, 16);
    }, 500);
    player.on("process", (p) => {
      process.value = p.process;
    });
    player.on("scroll-prev", (type) => {
      if (type === 2) {
        fullpage.value.api.moveSectionUp();
      }
    });
    player.on("scroll-next", (type) => {
      if (type === 2) {
        fullpage.value.api.moveSectionDown();
      }
    });
  });

  // player.on("loaded", () => {
  //   console.log("所有图片完成");
  // });
  // player.on("loadPress", (p) => {
  //   // console.log(`加载`, p);
  //   emitter.emit("updatePress", p);
  // });
});
onUnmounted(() => {
  emitter.off("onLeave", handler);
});
const onPlayerScroll = (event, type) => {
  // console.log("onPlayerScroll");
  const player = usePlayer();
  player.manualScroll(event, type);
};
</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;
}
.section1 {
  display: flex;
  flex-flow: column;
  align-items: center;
  line-height: 2;
  color: #997946;
  justify-content: center;
  background: url(/img/canvas/hua-3/0000.webp) no-repeat center/cover;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  .wwmap {
    position: absolute;
    top: 5vh !important;
    right: 5vw;
    left: auto;
    width: auto !important;
    text-align: right;
  }
}
</style>