又改过渡方式

src/components/PaginationComp.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="pagination-comp">
+    <div
+      v-for="index in total"
+      :key="index"
+      class="page-icon"
+      :class="{
+        active: index === idx + 1
+      }"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+import useSizeAdapt from "@/useFunctions/useSizeAdapt.js"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject('$env')
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const props = defineProps({
+  total: {
+    type: Number,
+    requied: true,
+  },
+  idx: {
+    type: Number,
+    default: 0,
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.pagination-comp{
+  display: flex;
+  align-items: center;
+  gap: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  >.page-icon{
+    width: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    border-radius: 50%;
+    border: 1px solid #7B916B;
+    min-width: 6px;
+    min-height: 6px;
+  }
+  >.page-icon.active{
+    background: #7B916B;
+  }
+}
+</style>

src/main.js

@@ -19,6 +19,7 @@ import OperationTip from '@/components/OperationTip.vue'
 import HotspotComp from '@/components/HotspotComp.vue'
 import SerialFrames from '@/components/LongImageSerialFrames.vue'
 import BtnSkip from '@/components/BtnSkip.vue'
+import PaginationComp from '@/components/PaginationComp.vue'
 
 console.log(`version: ${process.env.VUE_APP_VERSION}`)
 console.log(`Build time: ${process.env.VUE_APP_UPDATE_TIME}`)
@@ -91,6 +92,7 @@ app.use(store)
   .component('SwiperSlide', SwiperSlide)
   .component('SerialFrames', SerialFrames)
   .component('BtnSkip', BtnSkip)
+  .component('PaginationComp', PaginationComp)
   .mount('#app')
 
 //  you can reset the default options at any other time

src/useFunctions/useSmoothSwipe.js

@@ -28,6 +28,7 @@ export default function useSmoothSwipe({
   })
   let anchorPosListInnerReverse = [...anchorPosListInner].reverse()
   const currentAnchorIdx = ref(initialAnchorIdx)
+  const goingToAnchorIdx = ref(null)
 
   watch(isOperating, (v) => {
     if (v) {
@@ -86,9 +87,11 @@ export default function useSmoothSwipe({
         }, 1200)
         tween.easing(TWEEN.Easing.Cubic.InOut)
         tween.start()
+        goingToAnchorIdx.value = destinationIdx
         tween.onComplete(() => {
           isTweening = false
           currentAnchorIdx.value = destinationIdx
+          goingToAnchorIdx.value = null
         })
       }
     } else if (dX > 1) {
@@ -103,9 +106,11 @@ export default function useSmoothSwipe({
         }, 1200)
         tween.easing(TWEEN.Easing.Cubic.InOut)
         tween.start()
+        goingToAnchorIdx.value = anchorPosList.length - destinationIdx - 1
         tween.onComplete(() => {
           isTweening = false
           currentAnchorIdx.value = anchorPosList.length - destinationIdx - 1
+          goingToAnchorIdx.value = null
         })
       }
     }
@@ -154,5 +159,6 @@ export default function useSmoothSwipe({
     translateLength,
     haveSwipedThisTime,
     currentAnchorIdx,
+    goingToAnchorIdx,
   }
 }

src/views/GameView.vue

@@ -45,10 +45,34 @@ onMounted(() => {
     mode.value = 'home'
   }
 })
+
+/**
+ * 右滑返回
+ */
+const fingerPosXWhenTouchStart = ref(0)
+const handletouchstart = (event) => {
+  fingerPosXWhenTouchStart.value = event.changedTouches[0].pageX
+}
+const touchMove = (event) => {
+  let currentX = event.changedTouches[0].pageX
+  let tX = currentX - fingerPosXWhenTouchStart.value
+  if (tX > 1) {
+    router.push({
+      name: 'MoreContent',
+      query: {
+        anchorIdx: 1,
+      }
+    })
+  }
+}
 </script>
 
 <template>
-  <div class="game-page">
+  <div
+    class="game-page"
+    @touchstart="handletouchstart($event)"
+    @touchmove="touchMove($event)"
+  >
     <Toast
       ref="toast"
       :message="`暂未开发`"
@@ -114,9 +138,17 @@ onMounted(() => {
           alt="loading"
           @click="goHome()"
         >
-        <BtnBack @click="goBack()" />
+        <!-- <BtnBack @click="goBack()" /> -->
       </div>
+
+      <PaginationComp
+        class="pagination"
+        :total="3"
+        :idx="2"
+      />
     </div>
+
+
     <!-- 游戏页面 -->
     <iframe
       v-if="mode === 'unity'"
@@ -328,7 +360,7 @@ onMounted(() => {
       align-items: center;
       justify-content: space-evenly;
       position: absolute;
-      height: calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      // height: calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       left: calc(25 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       bottom: calc(30 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
 
@@ -338,6 +370,12 @@ onMounted(() => {
       }
     }
 
+    >.pagination {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
   }
 
   .game-box {

src/views/MoreContent.vue

@@ -203,16 +203,11 @@
       </div>
     </div>
 
-    <div class="pagination">
-      <div
-        v-for="index in 3"
-        :key="index"
-        class="page-icon"
-        :class="{
-          active: index === currentAnchorIdx + 1
-        }"
-      />
-    </div>
+    <PaginationComp
+      class="pagination"
+      :total="3"
+      :idx="currentAnchorIdx"
+    />
     <BtnBack
       @click="router.push({
         name: 'HomeView',
@@ -252,6 +247,17 @@
         x5-video-player-type="h5"
       />
     </Transition>
+    <Transition name="fade-in">
+      <video
+        v-if="isShowVideoFadeAtPage3"
+        ref="videoFadeAtPage3El"
+        class="fade-to-other-page"
+        src="@/assets/videos/fade-from-more-content-to-game.mp4"
+        playsinline
+        webkit-playsinline="true"
+        x5-video-player-type="h5"
+      />
+    </Transition>
   </div>
 </template>
 
@@ -265,6 +271,7 @@ import useSmoothSwipe from '@/useFunctions/useSmoothSwipe.js'
 import { useWindowSize } from '@vueuse/core'
 import OperationTip from "@/components/OperationTip.vue"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt.js"
+import PaginationComp from "@/components/PaginationComp.vue"
 
 const route = useRoute()
 const router = useRouter()
@@ -285,7 +292,7 @@ const { width: windowWidth, height: windowHeight } = useWindowSize()
 const maxTranslateLength = computed(() => {
   return windowHeight.value * windowWidthDesign / windowHeightDesign
 })
-const { haveSwipedThisTime, translateLength, currentAnchorIdx } = useSmoothSwipe({
+const { haveSwipedThisTime, translateLength, currentAnchorIdx, goingToAnchorIdx } = useSmoothSwipe({
   scrollTargetRef: scrollTarget,
   maxTranslateLength,
   viewportWidth: windowWidth,
@@ -375,36 +382,33 @@ function onClickEntryAtMoZhu(pathName) {
   })
 }
 
-/**
- * 跳转下一个页面
- */
-// const fingerPosXWhenTouchStart = ref(0)
-// const isAtBorderWhenTouchStart = ref(false)
-// const handletouchstart = (event) => {
-//   fingerPosXWhenTouchStart.value = event.changedTouches[0].pageX
-//   if (Math.abs(maxTranslateLength.value - translateLength.value - windowWidth.value) < 1) {
-//     isAtBorderWhenTouchStart.value = true
-//   } else {
-//     isAtBorderWhenTouchStart.value = false
-//   }
-// }
-// const touchMove = (event) => {
-//   let currentX = event.changedTouches[0].pageX
-//   let tX = currentX - fingerPosXWhenTouchStart.value
-//   if (tX < -1 && isAtBorderWhenTouchStart.value) {
-//     router.push({
-//       name: 'Game',
+const videoFadeAtPage3El = ref(null)
+const isShowVideoFadeAtPage3 = ref(false)
+// function onClickEntryAtMoZhu(pathName) {
+//   isShowVideoFadeAtMoZhu.value = true
+//   nextTick(() => {
+//     videoFadeAtMoZhuEl.value.addEventListener('ended', () => {
+//       router.push({
+//         name: pathName,
+//       })
 //     })
-//   }
+//     videoFadeAtMoZhuEl.value.play()
+//   })
 // }
-watch(currentAnchorIdx, (v) => {
+watch(goingToAnchorIdx, (v) => {
   if (v === 2) {
-    router.push({
-      name: 'Game',
-    })
+    setTimeout(() => {
+      isShowVideoFadeAtPage3.value = true
+      nextTick(() => {
+        videoFadeAtPage3El.value.addEventListener('ended', () => {
+          router.push({
+            name: 'Game',
+          })
+        })
+        videoFadeAtPage3El.value.play()
+      })
+    }, 850)
   }
-}, {
-  immediate: true,
 })
 </script>
 
@@ -631,20 +635,6 @@ watch(currentAnchorIdx, (v) => {
     left: 50%;
     transform: translateX(-50%);
     bottom: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    display: flex;
-    align-items: center;
-    gap: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    >.page-icon{
-      width: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      border-radius: 50%;
-      border: 1px solid #7B916B;
-      min-width: 6px;
-      min-height: 6px;
-    }
-    >.page-icon.active{
-      background: #7B916B;
-    }
   }
   >.operation-tip{
     position: absolute;