各页面串起来

src/views/GameView.vue

@@ -23,11 +23,12 @@ const resetHome = () => {
 }
 
 const toast = ref(null)
-
 const showToast = () => {
   toast.value.show()
   setTimeout(() => {
-    toast.value.hide()
+    if (toast?.value) {
+      toast.value.hide()
+    }
   }, 2000)
 }
 
@@ -45,12 +46,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <Toast
-    ref="toast"
-    :message="`暂未开发`"
-    :duration="`3000`"
-  />
   <div class="game-page">
+    <Toast
+      ref="toast"
+      :message="`暂未开发`"
+      :duration="`3000`"
+    />
+
     <!--默认首页 -->
     <div
       class="home"

src/views/MoreContent.vue

@@ -5,6 +5,8 @@
     <div
       ref="scrollTarget"
       class="scroll-target"
+      @touchstart="handletouchstart($event)"
+      @touchmove="touchMove($event)"
     >
       <img
         class="temp-bg"
@@ -166,6 +168,29 @@ const unwatch = watch(translateLength, (v) => {
   //   })
   // }
 })
+
+/**
+ * 左滑跳转新页面
+ */
+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 < -15 && isAtBorderWhenTouchStart.value) {
+    router.push({
+      name: 'Game',
+    })
+  }
+}
 </script>
 
 <style lang="less" scoped>