From ed516a9a7bd7ea3713f5581001e12f12f5c8a272 Mon Sep 17 00:00:00 2001
From: xty <xty@dcloud.io>
Date: Mon, 25 Nov 2024 18:27:58 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85css=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/CSS/transition/transition.uvue | 30 +++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/pages/CSS/transition/transition.uvue b/pages/CSS/transition/transition.uvue
index ae8a5e53..6310eede 100644
--- a/pages/CSS/transition/transition.uvue
+++ b/pages/CSS/transition/transition.uvue
@@ -45,6 +45,10 @@
     <view class="container">
       <text class="text">点击修改TransformTranslate</text>
       <view class="base-style transition-transform" id="transformTranslate" @click="changeTransformTranslate"></view>
+    </view>
+    <view class="container" @touchmove="handleTouchMove" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
+      <text class="text">在组件内滑动测试是否闪动</text>
+      <view class="base-style transition-transform" id="styleTransformTranslateScale"></view>
     </view>
     <view class="container">
       <text class="text">点击修改Transform和宽</text>
@@ -99,8 +103,12 @@
         propertyStyleBackground: null as UniElement | null,
         isTransitionStyleTransformWithOrigin: false,
         styleTransformWithOrigin: null as UniElement | null,
-        styleTransformTranslate: null as UniElement | null,
-        isTransformTranslate: false
+        styleTransformTranslate: null as UniElement | null,
+        isTransformTranslate: false,
+        styleTransformTranslateScale: null as UniElement | null,
+        startX: 0,
+        moveX: 0,
+        oldX: 0,
       }
     },
     onReady() {
@@ -117,7 +125,8 @@
       this.propertyStyleBackground = uni.getElementById("propertyStyleBackground")
       this.styleTransformWithOrigin = uni.getElementById("styleTransformWithOrigin")
       this.styleTransformWithWidth = uni.getElementById("styleTransformWithWidth")
-      this.styleTransformTranslate = uni.getElementById("transformTranslate")
+      this.styleTransformTranslate = uni.getElementById("transformTranslate")
+      this.styleTransformTranslateScale = uni.getElementById("styleTransformTranslateScale")
     },
     methods: {
       changeWidthOrHeight() {
@@ -232,6 +241,21 @@
           : '100px'
         )
         this.isTransitionstylePosition = !this.isTransitionstylePosition
+      },
+      handleTouchStart(e : UniTouchEvent) {
+        this.startX = e.changedTouches[0].clientX
+      },
+      handleTouchMove(e : UniTouchEvent) {
+        console.log("touchmove:" + e.touches[0].clientX + "," + e.touches[0].clientY);
+        e.preventDefault()
+        e.stopPropagation()
+        const difX = e.changedTouches[0].clientX
+        this.moveX = difX - this.startX + this.oldX
+        this.styleTransformTranslateScale?.style?.setProperty('transition-duration', '0ms')
+        this.styleTransformTranslateScale?.style?.setProperty('transform', `translate(${this.moveX}px,0px) scale(0.5)`)
+      },
+      handleTouchEnd(_ : UniTouchEvent) {
+        this.oldX = this.moveX
       },
     },
   }
-- 
GitLab