activity/src/view/AEROSPACE2023/index.vue

<template>
  <div class="AEROSPACE2023" @touchmove="touchmove">
    <div ref="main" class="page" @touchstart="touchstart" @touchend="touchend">
      <page0
        :class="{
          animate__animated: page === 0,
          animate__fadeInUp: isUp && page === 0,
          animate__fadeInDown: !isUp && page === 0,
        }"
        v-if="page === 0"
      />
      <page1
        :class="{
          animate__animated: page === 1,
          animate__fadeInUp: isUp && page === 1,
          animate__fadeInDown: !isUp && page === 1,
        }"
        v-if="page === 1"
      />
      <page2
        :class="{
          animate__animated: page === 2,
          animate__fadeInUp: isUp && page === 2,
          animate__fadeInDown: !isUp && page === 2,
        }"
        v-if="page === 2"
      />
      <page3
        :class="{
          animate__animated: page === 3,
          animate__fadeInUp: isUp && page === 3,
          animate__fadeInDown: !isUp && page === 3,
        }"
        v-if="page === 3"
      />
      <page4
        :class="{
          animate__animated: page === 4,
          animate__fadeInUp: isUp && page === 4,
          animate__fadeInDown: !isUp && page === 4,
        }"
        v-if="page === 4"
      />
      <page5
        :class="{
          animate__animated: page === 5,
          animate__fadeInUp: isUp && page === 5,
          animate__fadeInDown: !isUp && page === 5,
        }"
        v-if="page === 5"
      />
      <page6
        :class="{
          animate__animated: page === 6,
          animate__fadeInUp: isUp && page === 6,
          animate__fadeInDown: !isUp && page === 6,
        }"
        v-if="page === 6"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import page0 from './page0.vue';
import page1 from './page1.vue';
import page2 from './page2.vue';
import page3 from './page3.vue';
import page4 from './page4.vue';
import page5 from './page5.vue';
import page6 from './page6.vue';
// import { onMounted, reactive } from "vue";
// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";

/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
// console.log(window.$originData);
// const play_stats = ref(false);
const main = ref(null);
const page = ref(3);
const isUp = ref(true);
let startStats = 0;
let time = Date.now();
let startY = 0;
const isChangePage = cha => {
  let out = false; // false 不能翻页  true 能翻页
  let sondiv = getinnerele();
  // 视口高度 main.value.offsetHeight
  // 内容高度 sondiv.offsetHeight

  // 视口基本大于内容  则可以翻页
  /**
   * 初始化y值或结束y值不在翻页区间，则不能翻页
   * 翻页区间是scrolltop 10 以内 和 底部剩余空间10 以内
   */
  let h = main.value.offsetHeight + main.value.scrollTop;
  //   if (Math.pow(cha, 2) < 6400) out = true;
  let timeRange = Date.now() - time > 50;
  if (cha < -80 && startStats < 10 && timeRange) {
    // 下滑
    /**
     * 下滑初始滚动小于10 -翻页
     */
    out = true;
  } else {
    // 上滑
    /**
     * 下滑剩余小于10 -翻页
     */
    if (sondiv.offsetHeight - h < 10 && cha > 80 && timeRange) out = true;
  }
  return out;
};
const touchstart = e => {
  time = Date.now();
  startStats = main.value.scrollTop;
  startY = e.changedTouches[0].clientY;
};

const touchend = e => {
  const cha = startY - e.changedTouches[0].clientY;
  if (!isChangePage(cha)) return;
  //  cha > 0    向上滑动手指
  //  cha < 0    向下滑动手指
  //  初始位置滚动为0的，则判断距离25即可
  // 距离足够则滑动到下一页；
  let n = cha > 0 ? 1 : -1;
  let dn = n + page.value;
  let len = 6;
  //   if (dn < 0) dn = len;
  //   if (dn > len) dn = 0;
  if (dn < 0) return;
  if (dn > len) return;
  isUp.value = n === 1;
  page.value = dn;
  main.value.scrollTop = 0;
};

const touchmove = e => {
  const cha = startY - e.changedTouches[0].clientY;
  if (main.value.scrollTop <= 1 && cha < 0) e.preventDefault();
  const ele = getinnerele()
  if (cha > 0 && main.value.offsetHeight + main.value.scrollTop >= ele.offsetHeight ) e.preventDefault();
};

const getinnerele = () => {
  let nodes = main.value.childNodes || [];
  return nodes[page.value];
};
</script>
<style lang="scss">
// 动画库
@import url(./sass/animation.scss);
// 字体库
@import url(./sass/base.scss);
// @import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css);

.AEROSPACE2023 {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url(./img/background.jpg);
  background-size: 100% 100%;
  max-width: 750px;
  min-width: 330px;
  margin: 0 auto;
  display: block;

  .imgbtn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
  }

  .page {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    overflow-y: auto;

    & > div {
      width: 100%;
    }
  }

  .excess-enter-active,
  .excess-leave-active {
    transition: opacity 0.1s ease;
  }

  .excess-enter-from,
  .excess-leave-to {
    opacity: 0;
  }
}
</style>