activity/src/view/schedule/index.vue

<template>
  <div class="schedule" @touchmove="touchmove">
    <!-- 上划图标 -->
    <div class="up_icon">
      <div class="center0">
        <div class="up_left"></div>
        <div class="up_right"></div>
      </div>
    </div>

    <div ref="main" class="page" @touchstart="touchstart" @touchend="touchend">
      <pageFirst
        :class="{
          animate__animated: true,
          animate__fadeInUp: isUp,
          animate__fadeInDown: !isUp,
        }"
        v-if="page === 0"
      />
      <pageThird
        :class="{
          animate__animated: true,
          animate__fadeInUp: isUp,
          animate__fadeInDown: !isUp,
        }"
        v-if="page === 1"
      />
      <pageFifth
        :class="{
          animate__animated: true,
          animate__fadeInUp: isUp,
          animate__fadeInDown: !isUp,
        }"
        v-if="page === 2"
      />
      <page4
        :class="{
          animate__animated: true,
          animate__fadeInUp: isUp,
          animate__fadeInDown: !isUp,
        }"
        v-if="page === 3"
      />
      <page7
        :class="{
          animate__animated: true,
          animate__fadeInUp: isUp,
          animate__fadeInDown: !isUp,
        }"
        v-if="page === 4"
      />
      <pageSexth
        :class="{
          animate__animated: true,
          animate__fadeInUp: isUp,
          animate__fadeInDown: !isUp,
        }"
        v-if="page === 5"
      />
      <page12
        :class="{
          animate__animated: true,
          animate__fadeInUp: isUp,
          animate__fadeInDown: !isUp,
        }"
        v-if="page === 6"
      />
      <page8
        :class="{
          animate__animated: true,
          animate__fadeInUp: isUp,
          animate__fadeInDown: !isUp,
        }"
        v-if="page === 7"
      />
      <page9
        :class="{
          animate__animated: true,
          animate__fadeInUp: isUp,
          animate__fadeInDown: !isUp,
        }"
        v-if="page === 8"
      />
      <page10
        :class="{
          animate__animated: true,
          animate__fadeInUp: isUp,
          animate__fadeInDown: !isUp,
        }"
        v-if="page === 9"
      />
      <page11
        :class="{
          animate__animated: true,
          animate__fadeInUp: isUp,
          animate__fadeInDown: !isUp,
        }"
        v-if="page === 10"
      />
      <page13
        :class="{
          animate__animated: true,
          animate__fadeInUp: isUp,
          animate__fadeInDown: !isUp,
        }"
        v-if="page === 11"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, nextTick } from 'vue';
import pageFirst from './page1.vue';
import pageThird from './page3.vue';
import page4 from './page4.vue';
import pageFifth from './page5.vue';
import pageSexth from './page6.vue';
import page7 from './page7.vue';
import page8 from './page8.vue';
import page9 from './page9.vue';
import page10 from './page10.vue';
import page11 from './page11.vue';
import page12 from './page12.vue';
import page13 from './page13.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(0);
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 = 11;
  //   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;
  nextTick(() => {
    main.value.scrollTop = 0;
  });
};

const touchmove = e => {
  const cha = startY - e.changedTouches[0].clientY;
  if (main.value.scrollTop <= 1 && cha < 0) 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);

.schedule {
  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;
  }

  .rotating {
    -webkit-animation: rotating 1.2s linear infinite;
    -moz-animation: rotating 1.2s linear infinite;
    -o-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite;
  }

  .up_icon {
    width: 24px;
    height: 14px;
    position: absolute;
    z-index: 10;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0;

    .center0 {
      position: relative;
      display: flex;
      -webkit-animation: start 1.5s ease-in-out infinite;
      -moz-animation: start 1.5s infinite ease-in-out;
      animation: start 1.5s ease-in-out infinite;

      .up_left,
      .up_right {
        overflow: hidden;
        height: 14px;
        width: 12px;
        flex: 1;
        padding-top: 5px;
      }

      .up_left::after,
      .up_right::after {
        background-color: #fff;
        width: 14px;
        height: 5px;
        border-radius: 2px;
        position: absolute;
        display: block;
        content: ' ';
      }

      .up_left::after {
        transform: rotate(-40deg);
        box-shadow: 1px 1px 1px #646464;
        -webkit-transform: rotate(-40deg);
      }
      .up_right::after {
        -webkit-transform: rotate(40deg);
        transform: rotate(40deg);
        box-shadow: 1px -1px 1px #646464;
        margin-left: -5px;
      }
    }
  }

  .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>