left right swipe

src/App.vue

@@ -1,6 +1,9 @@
 <script setup>
 import { ref } from 'vue'
 import Bottom from 'cpns/Bottom'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
 
 const isDrag = ref(false)
 
@@ -12,6 +15,40 @@ const handleRelease = e => {
   // 背景实体化
   isDrag.value = false
 }
+
+// 六个页面轮询
+const getNextPage = (current, flag) => {
+  const arr = [
+    '/industry',
+    '/hardware',
+    '/case-show',
+    '/factory',
+    '/recruit',
+    '/contact',
+  ]
+  let i = 0
+  arr.map((item, index) => {
+    if (item == current) {
+      i = index
+    }
+  })
+  if (flag == 0) {
+    return arr[i + 1 == 6 ? 0 : i + 1]
+  }
+  return arr[i - 1 == -1 ? 5 : i - 1]
+}
+
+const swipeLeftHandler = e => {
+  const next = getNextPage(route.path, 0)
+  window.location.href =
+    window.location.origin + window.location.pathname + '#' + next
+}
+
+const swipeRightHandler = e => {
+  const next = getNextPage(route.path, 1)
+  window.location.href =
+    window.location.origin + window.location.pathname + '#' + next
+}
 </script>
 
 <template>
@@ -19,6 +56,8 @@ const handleRelease = e => {
     class="app_container"
     v-touch:press="handlePress"
     v-touch:release="handleRelease"
+    v-touch:swipe.left="swipeLeftHandler"
+    v-touch:swipe.right="swipeRightHandler"
   >
     <router-view></router-view>
     <Bottom :isDrag="isDrag" />