From bb6bdd4f7ebc9a69159aef1eaeb7c5dff2829772 Mon Sep 17 00:00:00 2001
From: shutao <shutao@dcloud.io>
Date: Mon, 27 Nov 2023 17:21:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=B0=8F=E7=90=83=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=20touch-event.uvue=20=E6=B5=8B=E8=AF=95touch=E7=9A=84?=
 =?UTF-8?q?screenX\Y?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |   8 ++
 .../component/general-event/touch-event.uvue  | 113 ++++++++++++++++++
 pages/tabBar/component.uvue                   |   8 +-
 3 files changed, 128 insertions(+), 1 deletion(-)
 create mode 100644 pages/component/general-event/touch-event.uvue

diff --git a/pages.json b/pages.json
index 2a083570..910d66c3 100644
--- a/pages.json
+++ b/pages.json
@@ -1075,6 +1075,14 @@
         "navigationBarTitleText": "分享",
         "enablePullDownRefresh": false
       }
+    },
+    {
+      "path" : "pages/component/general-event/touch-event",
+      "style" :
+      {
+        "navigationBarTitleText" : "touch-event",
+        "enablePullDownRefresh" : false
+      }
     }
 
   ],
diff --git a/pages/component/general-event/touch-event.uvue b/pages/component/general-event/touch-event.uvue
new file mode 100644
index 00000000..8f7f98f1
--- /dev/null
+++ b/pages/component/general-event/touch-event.uvue
@@ -0,0 +1,113 @@
+<template>
+      <page-head title="拖拽图标测试相关事件"></page-head>
+	<view class="container">
+    <view class="view-box">
+      <image class="icon" id="icon" src="../image/logo.png" @touchstart="onTouchStart" @touchcancel="onTouchCancel" @touchmove="onTouchMove" @touchend="onTouchEnd"></image>
+    </view>
+
+  </view>
+  <view v-if="touchEvent !== null">
+    <text class="title1">touches: </text>
+    <template v-for="(touch, index) in touchEvent!.touches" :key="index">
+      <text class="title2">touch[{{ index }}]:</text>
+      <text>identifier: {{touch.identifier}}</text>
+      <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
+      <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
+      <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
+    </template>
+  </view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+        move: false,
+        posX: 0,
+        posY: 0,
+        lastX: 0,
+        lastY: 0,
+        touchEvent: null as TouchEvent | null,
+        icon: null as Element | null
+			}
+		},
+    onReady() {
+      this.icon = uni.getElementById("icon")
+    },
+		methods: {
+      onTouchStart(e: TouchEvent) {
+        this.touchEvent = e
+        if(!this.move) {
+          this.move = true
+          this.posX = e.touches[0].screenX
+          this.posY = e.touches[0].screenY
+        }
+      },
+			onTouchMove(e: TouchEvent) {
+        this.touchEvent = e
+        let p = e.touches[0]
+        if(p.screenX == this.lastX && p.screenY == this.lastY){
+        	return
+        }
+        let x = p.screenX-this.posX
+        let y = p.screenY-this.posY
+        this.lastX = p.screenX
+        this.lastY = p.screenY
+        this.icon?.style?.setProperty('transform', 'translate('+x+'px,'+y+'px)')
+      },
+      onTouchEnd(e: TouchEvent) {
+        if(e.touches.length == 0) {
+          this.resetIcon()
+          this.touchEvent = null
+        }
+      },
+      onTouchCancel(_: TouchEvent) {
+        this.resetIcon()
+        this.touchEvent = null
+      },
+      resetIcon() {
+        this.move = false;
+        this.posX = 0;
+        this.posY = 0;
+        this.icon?.style?.setProperty('transform', 'translate(0px,0px)')
+      }
+		}
+	}
+</script>
+
+<style>
+
+  .container {
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .view-box {
+    width: 300px;
+    height: 300px;
+    align-items: center;
+    justify-content: center;
+    border-style: solid;
+  }
+
+  .icon {
+    width: 100px;
+    height: 100px;
+  }
+
+  .msg-text {
+    margin-bottom: 100px;
+  }
+
+  .title1 {
+    margin-top: 10px;
+    font-size: 18px;
+  }
+
+  .title2 {
+    margin-top: 5px;
+    font-size: 16px;
+  }
+
+</style>
diff --git a/pages/tabBar/component.uvue b/pages/tabBar/component.uvue
index db330e4a..e20751e3 100644
--- a/pages/tabBar/component.uvue
+++ b/pages/tabBar/component.uvue
@@ -264,7 +264,13 @@ export default {
              name: '通用事件',
              url: '/pages/component/general-event/general-event',
              enable: true,
-           },{
+           },
+           {
+             name: 'touch事件',
+             url: '/pages/component/general-event/touch-event',
+             enable: true,
+           },
+           {
              name: 'Transition事件',
              url: '/pages/component/general-event/transition-event',
              enable: true,
-- 
GitLab