fullpage-show/src/pages/section14-frame.vue

<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>
  </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);
  }
};
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);
};
</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>