activity/src/view/schedule/index.vue

<template>
  <div class="schedule" @touchmove="touchmove">
    <!-- 播放键 -->
    <svg
      class="imgbtn rotating"
      @click="play"
      :style="{
        'animation-play-state': play_stats ? 'running' : 'paused',
      }"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="899"
      width="32"
      height="32"
    >
      <path
        d="M512 17.066667c273.339733 0 494.933333 221.5936 494.933333 494.933333S785.339733 1006.933333 512 1006.933333 17.066667 785.339733 17.066667 512 238.660267 17.066667 512 17.066667z"
        opacity=".502"
        p-id="900"
      ></path>
      <path
        d="M512 1024C229.2224 1024 0 794.7776 0 512 0 229.2224 229.2224 0 512 0c282.7776 0 512 229.2224 512 512 0 282.7776-229.2224 512-512 512z m0-972.8C257.501867 51.2 51.2 257.501867 51.2 512s206.301867 460.8 460.8 460.8 460.8-206.301867 460.8-460.8S766.498133 51.2 512 51.2z"
        fill="#FFFFFF"
        p-id="901"
      ></path>
      <path
        d="M530.568533 170.666667c4.8128 34.1504 5.495467 77.2096 41.2672 120.2688 27.4944 32.802133 58.453333 62.173867 79.7696 88.832C679.799467 414.6176 699.733333 458.359467 699.733333 502.784c0 71.0656-34.372267 141.431467-57.770666 180.394667h-10.990934c16.503467-36.898133 49.5104-97.723733 46.7456-162.628267-1.365333-36.232533-15.121067-75.178667-38.485333-103.867733-26.146133-33.501867-70.161067-60.142933-108.663467-62.8736v387.447466c0 30.754133-18.568533 58.7776-45.380266 79.274667C459.0592 841.028267 424.669867 853.333333 394.410667 853.333333c-19.2512 0-37.137067-6.144-49.5104-16.401066-13.073067-10.257067-20.6336-25.275733-20.6336-43.042134 0-28.023467 19.2512-56.046933 45.380266-76.544 26.146133-21.179733 59.136-34.850133 86.647467-34.850133 24.081067 0 44.6976 3.413333 57.088 15.035733V170.666667h17.186133z"
        fill="#FFFFFF"
        p-id="902"
      ></path>
    </svg>
    <!-- 上划图标 -->
    <div class="up_icon">
      <div class="center0">
        <div class="up_left"></div>
        <div class="up_right"></div>
      </div>
    </div>

    <change v-if="page === -1" />
    <div class="page" @touchstart="touchstart" @touchend="touchend">
      <pageFirst v-if="page === 0" />
      <!-- <pageSecond v-if="page === 1" /> -->
      <pageThird v-if="page === 1" />
      <pageFourth v-if="page === 2" />
      <pageFifth v-if="page === 3" />
      <pageSexth v-if="page === 4" />
      <pageSeventh v-if="page === 5" />
      <pageEighth v-if="page === 6" />
    </div>
  </div>
</template>
<script setup>
import { ref, nextTick } from 'vue';
import change from './change.vue';
import pageFirst from './page1.vue';
// import pageSecond from './page2.vue';
import pageThird from './page3.vue';
import pageFourth from './page4.vue';
import pageFifth from './page5.vue';
import pageSexth from './page6.vue';
import pageSeventh from './page7.vue';
import pageEighth from './page8.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);
let startY = 0;

const audio = new Audio('https://cxzx.smcic.net/topic/tool/media/bgm.mp3');
audio.loop = true; // 循环播放
audio.autoplay = 'autoplay';

audio.oncanplay = () => {
  window.WeixinJSBridge &&
    window.WeixinJSBridge.invoke(
      'getNetworkType',
      {},
      () => {
        // audio.play();
        // play_stats.value = true;
      },
      false
    );
};
audio.onplaying = () => (play_stats.value = !audio.paused);
audio.onpause = () => (play_stats.value = !audio.paused);

const play = () => {
  if (audio.paused) {
    // 播放
    audio.play();
  } else {
    // 暂停
    audio.pause();
  }
};

const touchstart = e => {
  startY = e.changedTouches[0].clientY;
};

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 
  // 距离足够则滑动到下一页；
  let n = cha > 0 ? 1 : -1;
  let dn = n + page.value;
  if (dn < 0) return (dn = 6);
  if (dn > 6) return (dn = 0);
  page.value = -1;
  nextTick(() => {
    let t = setTimeout(() => {
      clearTimeout(t);
      page.value = dn;
    }, 1200);
  });
};

const touchmove = e=> {
    e.preventDefault();
}
</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.webp);
  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>