diff --git a/pages/CSS/transition/transition.uvue b/pages/CSS/transition/transition.uvue index ae8a5e5394013c390219a05fb5807a4e5da753ca..6310eedeb61e85539901e86504c5067c9e3895eb 100644 --- a/pages/CSS/transition/transition.uvue +++ b/pages/CSS/transition/transition.uvue @@ -45,6 +45,10 @@ 点击修改TransformTranslate + + + 在组件内滑动测试是否闪动 + 点击修改Transform和宽 @@ -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 }, }, }