diff --git a/pages/CSS/overflow/overflow-visible-event.test.js b/pages/CSS/overflow/overflow-visible-event.test.js index 9be18dd1e8466cb38eccf7f7169124d344e699c1..896671b30cc1505680dbb669ae653aeb5c40d635 100644 --- a/pages/CSS/overflow/overflow-visible-event.test.js +++ b/pages/CSS/overflow/overflow-visible-event.test.js @@ -30,4 +30,23 @@ describe('/pages/CSS/overflow/overflow-visible-event.uvue', () => { res = await page.data('jest_result'); expect(res).toBe(true) }); + + // 此测试针对开发者使用 translate 移动view + it('Check Overflow Visible Part Use translate Drag', async ()=> { + await page.callMethod('jest_getRect') + const point_x = await page.data('jest_click_x'); + const point_y = await page.data('jest_click_y'); + const distance = 100; + const destY = point_y + 100 + const duration = 1000 + await program.adbCommand("input swipe" + " " + point_x + " " + point_y + " " + point_x + " " + destY + " " + duration) + await page.waitFor(1500); + await page.callMethod('jest_getParentRect') + const currentParentTop = await page.data('jest_parent_top'); + const offset = 2 + const diff = Math.abs(currentParentTop - distance) < offset + console.log("current ", currentParentTop); + console.log("diff", diff); + expect(diff).toBe(true) + }) }); diff --git a/pages/CSS/overflow/overflow-visible-event.uvue b/pages/CSS/overflow/overflow-visible-event.uvue index f2c3b4e9f36a88f7a3790cc1c5bd12b2238d2f61..3a52cfe76d02464921bc3f8ecb0b792cadb509f9 100644 --- a/pages/CSS/overflow/overflow-visible-event.uvue +++ b/pages/CSS/overflow/overflow-visible-event.uvue @@ -2,9 +2,10 @@ overflow=visible 父view(绿色),子view(红色),点击超出父view区域的部分也可触发事件。 - - + + @@ -17,25 +18,60 @@ return { jest_result: false, jest_click_x: -1, - jest_click_y: -1 + jest_click_y: -1, + jest_parent_top: -1.0, + startX: 0, + startY: 0, + moveX: 0, + moveY: 0, + oldX: 0, + oldY: 0, + moveEl: null as UniElement | null } }, + onReady() { + this.moveEl = uni.getElementById('parent') + }, methods: { handleClickOverflowPart() { console.log("click"); - this.jest_result = true; - uni.showToast({"title":"点击红色区域"}) + this.jest_result = true; + uni.showToast({ "title": "点击红色区域" }) + }, + handleTouchStartOverflowPart(e : UniTouchEvent) { + this.startX = e.changedTouches[0].clientX + this.startY = e.changedTouches[0].clientY }, - handleTouchMoveOverflowPart(e:UniTouchEvent) { + handleTouchMoveOverflowPart(e : UniTouchEvent) { console.log("touchmove:" + e.touches[0].clientX + "," + e.touches[0].clientY); + e.preventDefault() + e.stopPropagation() + const difX = e.changedTouches[0].clientX + const difY = e.changedTouches[0].clientY + this.moveX = difX - this.startX + this.oldX + this.moveY = difY - this.startY + this.oldY + this.moveEl?.style?.setProperty('transform', `translate(${this.moveX}px,${this.moveY}px)`) + }, + handleTouchEndOverflowPart(_ : UniTouchEvent) { + this.oldX = this.moveX + this.oldY = this.moveY }, jest_getRect() { const rect = uni.getElementById('child')?.getBoundingClientRect() - if (rect != null) { + if (rect != null) { const ratio = uni.getSystemInfoSync().devicePixelRatio this.jest_click_x = rect.x * ratio + 10 this.jest_click_y = rect.bottom * ratio - 10 - } + } + }, + jest_getParentRect() { + const transform = uni.getElementById('parent')?.style.getPropertyValue("transform") + if (transform != null) { + let value = transform as string + value = value.split(",")[1].slice(0, -3) + const ratio = uni.getSystemInfoSync().devicePixelRatio + this.jest_parent_top = Math.round((parseFloat(value) * ratio)) + } } } }