|
|
@@ -1,191 +0,0 @@
|
|
|
-<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"
|
|
|
- />
|
|
|
- <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 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(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 = 5;
|
|
|
- // 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>
|
liyongli