增加小球拖拽 touch-event.uvue 测试touch的screenX\Y

pages.json

@@ -1075,6 +1075,14 @@
         "navigationBarTitleText": "分享",
         "enablePullDownRefresh": false
       }
+    },
+    {
+      "path" : "pages/component/general-event/touch-event",
+      "style" :
+      {
+        "navigationBarTitleText" : "touch-event",
+        "enablePullDownRefresh" : false
+      }
     }
 
   ],

pages/component/general-event/touch-event.uvue

+<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>

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,