首页跳转到下一页的方案改为按钮触发

src/components/BtnClickMe.vue

@@ -0,0 +1,100 @@
+<template>
+  <Transition name="fade-in-out">
+    <button
+      v-show="isShow"
+      class="btn-click-me"
+    >
+      <div
+        v-if="props.text"
+        class="text animation-show-hide-half"
+      >
+        {{ props.text }}
+      </div>
+      <img
+        class=""
+        :src="require(`@/assets/images/icon-click-tip.png`)"
+        alt=""
+        draggable="false"
+      >
+    </button>
+  </Transition>
+</template>
+
+<script setup>
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+import { ref, computed, watch, onMounted, inject } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject('$env')
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'white', // 'green'
+  },
+  text: {
+    type: String,
+    default: '',
+  },
+  isShow: {
+    type: Boolean,
+    default: true,
+  }
+})
+
+const color = computed(() => {
+  if (props.color === 'white') {
+    return '#fff'
+  } else if (props.color === 'green') {
+    return '#7B916B'
+  } else {
+    return props.color
+  }
+})
+
+const isShow = computed(() => {
+  return props.isShow
+})
+</script>
+
+<style lang="less" scoped>
+.btn-click-me{
+  display: flex;
+  align-items: center;
+  >.text{
+    color: v-bind('color');
+    margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-family: KaiTi, KaiTi;
+    font-weight: 400;
+    font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  >img{
+    width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  .animation-show-hide-half {
+    animation: show-hide 1.5s infinite;
+  }
+}
+@keyframes show-hide {
+    0% {
+      opacity: 0.4;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0.4;
+    }
+  }
+</style>

src/main.js

@@ -15,6 +15,7 @@ import 'swiper/css'
 import 'swiper/css/pagination' // 分页器样式
 
 import BtnBack from '@/components/BtnBack.vue'
+import BtnClickMe from '@/components/BtnClickMe.vue'
 import OperationTip from '@/components/OperationTip.vue'
 import HotspotComp from '@/components/HotspotComp.vue'
 import HotspotForHomepage from '@/components/HotspotForHomepage.vue'
@@ -87,6 +88,7 @@ app.use(store)
   .use(VueViewer)
   .use(ElementPlus)
   .component('BtnBack', BtnBack)
+  .component('BtnClickMe', BtnClickMe)
   .component('OperationTip', OperationTip)
   .component('HotspotComp', HotspotComp)
   .component('HotspotForHomepage', HotspotForHomepage)

src/views/HomeView.vue

@@ -236,8 +236,6 @@
     <div
       ref="scrollerEl"
       class="scroller"
-      @touchstart="handletouchstart($event)"
-      @touchmove="touchMove($event)"
     >
       <div
         class="inner"
@@ -302,12 +300,12 @@
         })"
       />
     </Transition>
-    <button
-      class="test"
-      @click="onClickTest"
-    >
-      触发转场视频(调试专用)
-    </button>
+    <BtnClickMe
+      class="go-next-page"
+      text="点击继续"
+      :is-show="isShowBtnGoNextPage"
+      @click="onClickGoNextPage"
+    />
   </div>
 </template>
 
@@ -593,36 +591,44 @@ function showBigPainting() {
 }
 
 /**
- * 上滑跳转新页面
+ * 跳转新页面
  */
 const videoFadeToNextPageEl = ref(null)
 const isShowVideoFadeToNextPage = ref(false)
 const isShowSkip = ref(false)
-const fingerPosYWhenTouchStart = ref(0)
-const isAtBottomWhenTouchStart = ref(false)
-const handletouchstart = (event) => {
-  fingerPosYWhenTouchStart.value = event.changedTouches[0].pageY
-  if (Math.abs(scrollerEl.value.scrollTop + scrollerEl.value.clientHeight - scrollerEl.value.scrollHeight) <= 1) {
-    isAtBottomWhenTouchStart.value = true
+// const fingerPosYWhenTouchStart = ref(0)
+// const isAtBottomWhenTouchStart = ref(false)
+// const handletouchstart = (event) => {
+//   fingerPosYWhenTouchStart.value = event.changedTouches[0].pageY
+//   if (Math.abs(scrollerEl.value.scrollTop + scrollerEl.value.clientHeight - scrollerEl.value.scrollHeight) <= 1) {
+//     isAtBottomWhenTouchStart.value = true
+//   } else {
+//     isAtBottomWhenTouchStart.value = false
+//   }
+// }
+// const touchMove = (event) => {
+//   let currentY = event.changedTouches[0].pageY
+//   let tY = currentY - fingerPosYWhenTouchStart.value
+//   if (tY < -1 && isAtBottomWhenTouchStart.value) {
+//     isShowVideoFadeToNextPage.value = true
+//     nextTick(() => {
+//       videoFadeToNextPageEl.value.play()
+//     })
+//     setTimeout(() => {
+//       isShowSkip.value = true
+//     }, 2000)
+//   }
+// }
+const isShowBtnGoNextPage = ref(false)
+watch(scrollerElScrollTop, (v) => {
+  if (Math.abs(v + windowHeight.value - scrollerEl.value.scrollHeight) < 3) {
+    isShowBtnGoNextPage.value = true
   } else {
-    isAtBottomWhenTouchStart.value = false
-  }
-}
-const touchMove = (event) => {
-  let currentY = event.changedTouches[0].pageY
-  let tY = currentY - fingerPosYWhenTouchStart.value
-  if (tY < -1 && isAtBottomWhenTouchStart.value) {
-    isShowVideoFadeToNextPage.value = true
-    nextTick(() => {
-      videoFadeToNextPageEl.value.play()
-    })
-    setTimeout(() => {
-      isShowSkip.value = true
-    }, 2000)
+    isShowBtnGoNextPage.value = false
   }
-}
-
-function onClickTest() {
+})
+function onClickGoNextPage() {
+  isShowBtnGoNextPage.value = false
   isShowVideoFadeToNextPage.value = true
   nextTick(() => {
     videoFadeToNextPageEl.value.play()
@@ -902,7 +908,7 @@ function onClickTest() {
   >.hotspot-detail.painting-detail{
     backdrop-filter: blur(calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
   }
-  >.fade-to-next-page{
+  >video.fade-to-next-page{
     position: absolute;
     left: 0;
     top: 0;
@@ -912,13 +918,12 @@ function onClickTest() {
     z-index: 20;
   }
 
-  >button.test{
+  >button.go-next-page{
     position: absolute;
-    left: 0;
-    top: 0;
-    width: 100px;
-    height: 100px;
+    left: 50%;
+    bottom: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     z-index: 20;
+    transform: translate(-50%, 0);
   }
 }
 </style>