引入手势库 还未处理左右滑动

package-lock.json

@@ -13,7 +13,8 @@
         "postcss-px-to-viewport": "^1.1.1",
         "swiper": "^9.3.2",
         "vue": "^3.2.45",
-        "vue-router": "^4.0.13"
+        "vue-router": "^4.0.13",
+        "vue3-touch-events": "^4.1.3"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.0.0",
@@ -861,6 +862,11 @@
       "peerDependencies": {
         "vue": "^3.2.0"
       }
+    },
+    "node_modules/vue3-touch-events": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmmirror.com/vue3-touch-events/-/vue3-touch-events-4.1.3.tgz",
+      "integrity": "sha512-uXTclRzn7de1mgiDIZ8N4J/wnWl1vBPLTWr60fqoLXu7ifhDKpl83Q2m9qA20KfEiAy+L4X/xXGc5ptGmdPh4A=="
     }
   },
   "dependencies": {
@@ -1404,6 +1410,11 @@
       "requires": {
         "@vue/devtools-api": "^6.0.0"
       }
+    },
+    "vue3-touch-events": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmmirror.com/vue3-touch-events/-/vue3-touch-events-4.1.3.tgz",
+      "integrity": "sha512-uXTclRzn7de1mgiDIZ8N4J/wnWl1vBPLTWr60fqoLXu7ifhDKpl83Q2m9qA20KfEiAy+L4X/xXGc5ptGmdPh4A=="
     }
   }
 }

package.json

@@ -14,7 +14,8 @@
     "postcss-px-to-viewport": "^1.1.1",
     "swiper": "^9.3.2",
     "vue": "^3.2.45",
-    "vue-router": "^4.0.13"
+    "vue-router": "^4.0.13",
+    "vue3-touch-events": "^4.1.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",

src/components/Bottom.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bottom_container">
+  <div :class="isDrag ? 'bottom_container drag' : 'bottom_container'">
     <div class="online">
       <img class="img1" :src="A1" alt="" />
       <span class="text1">在线咨询</span>
@@ -20,6 +20,11 @@
 import A1 from '@/static/img/bottom/kefu.png'
 import A2 from '@/static/img/bottom/phone.png'
 import A3 from '@/static/img/bottom/wechat.png'
+const props = defineProps({
+  isDrag: {
+    type: Boolean,
+  },
+})
 </script>
 
 <style lang="scss" scoped>
@@ -85,4 +90,10 @@ import A3 from '@/static/img/bottom/wechat.png'
     }
   }
 }
+.drag {
+  opacity: 0.3;
+  transition-property: all;
+  transition-duration: 0.7s;
+  animation-fill-mode: forwards;
+}
 </style>

src/main.js

@@ -2,7 +2,8 @@ import { createApp } from 'vue'
 import router from './router'
 import store from './store'
 import App from './App.vue'
+import Vue3TouchEvents from 'vue3-touch-events'
 import './static/css/reset.css'
 import './style.scss'
 
-createApp(App).use(router).use(store).mount('#app')
+createApp(App).use(router).use(store).use(Vue3TouchEvents).mount('#app')

src/pages/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="home_container">
+  <div
+    class="home_container"
+    v-touch:press="handlePress"
+    v-touch:release="handleRelease"
+  >
     <Swiper />
     <CaseShow />
     <Hardware />
@@ -10,7 +14,7 @@
     <News />
     <Cooperation />
     <Awards />
-    <Bottom />
+    <Bottom :isDrag="isDrag" />
   </div>
 </template>
 
@@ -26,6 +30,18 @@ import News from 'cpns/News'
 import Cooperation from 'cpns/Cooperation'
 import Awards from 'cpns/Awards'
 import Bottom from 'cpns/Bottom'
+import { ref } from 'vue'
+
+const isDrag = ref(false)
+
+const handlePress = e => {
+  // 背景虚化
+  isDrag.value = true
+}
+const handleRelease = e => {
+  // 背景实体化
+  isDrag.value = false
+}
 </script>
 
 <style lang="scss" scoped>

yarn.lock

@@ -474,3 +474,8 @@
     "@vue/runtime-dom" "3.2.47"
     "@vue/server-renderer" "3.2.47"
     "@vue/shared" "3.2.47"
+
+"vue3-touch-events@^4.1.3":
+  "integrity" "sha512-uXTclRzn7de1mgiDIZ8N4J/wnWl1vBPLTWr60fqoLXu7ifhDKpl83Q2m9qA20KfEiAy+L4X/xXGc5ptGmdPh4A=="
+  "resolved" "https://registry.npmmirror.com/vue3-touch-events/-/vue3-touch-events-4.1.3.tgz"
+  "version" "4.1.3"