activity/src/view/schedule/index.vue

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

    <div 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 @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 2" />
      <page4 @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 3" />
      <page7 @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 4" />
      <page8 @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 5" />
      <page9 @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 6" />
      <page10 @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 7" />
      <page11 @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 8" />
      <page12 @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 9" />
      <pageSexth @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 10" />
    </div>
  </div>
</template>
<script setup>
import { ref } 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 { 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 page = ref(0);
const isUp = ref(true);
let startY = 0;
let t= 0;
const touchstart = e => {
  startY = e.changedTouches[0].clientY;
  t = Date.now()
};

const touchend = e => {
  const cha = startY - e.changedTouches[0].clientY;
  //  cha > 0    向上滑动手指
  //  cha < 0    向下滑动手指
  if(cha <= 0 && cha >= -50) return 
  if(cha > 0 && cha < 100) return 
  if (Date.now() - t > 500) return e.preventDefault(); 
  // 距离足够则滑动到下一页；
  let n = cha > 0 ? 1 : -1;
  let dn = n + page.value;
  let len = 10;
  isUp.value = n === 1;
  if (dn < 0) return (dn = len);
  if (dn > len) return (dn = 0);
  page.value = dn;
};

const isNext = B => {
    console.log(B)
}

</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;
  position: fixed;
  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;

    & > div {
      width: 100%;
      height: 100%;
    }
  }

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

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