From 73e5e5796125919a8f6aaca823ec4bf7dd089362 Mon Sep 17 00:00:00 2001 From: hdx Date: Wed, 30 Aug 2023 11:51:07 +0800 Subject: [PATCH] =?UTF-8?q?swiper:=20=E4=BC=98=E5=8C=96=E8=BE=B9=E7=95=8C?= =?UTF-8?q?=E6=A3=80=E6=9F=A5,=20=E8=A1=A5=E5=85=85=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/template/long-list/long-list.uvue | 57 +++++++++++++------- pages/template/swiper-list/swiper-list.uvue | 60 +++++++++++++-------- 2 files changed, 76 insertions(+), 41 deletions(-) diff --git a/pages/template/long-list/long-list.uvue b/pages/template/long-list/long-list.uvue index 3418f016..5ec2ce5d 100644 --- a/pages/template/long-list/long-list.uvue +++ b/pages/template/long-list/long-list.uvue @@ -32,8 +32,8 @@ import longPage from './long-list-page.uvue'; type SwiperTabsItem = { - left : number, - width : number + x : number, + w : number } type SwiperViewItem = { @@ -88,25 +88,42 @@ onTabClick(index : number) { this.setSwiperIndex(index, false) }, + /// 兼容微信 skyline 和 webview, uni-app-x 和 webview 行为一致 + /// skyline 每项完成触发 Animationfinish，偏移值重置 + /// webview 全部完成触发 Animationfinish，偏移值累加 + /// 在滑动到下一个项的过程中，再次反向滑动，偏移值递减 onSwiperTransition(e : SwiperTransitionEvent) { - const offsetX = e.detail.dx - // 兼容微信 skyline 和 webview - const offsetIndex = offsetX.toInt() / this.$swiperWidth - const currentIndex = this.$animationFinishIndex + offsetIndex.toInt() - - let moveToIndex = offsetX > 0 ? currentIndex + 1 : currentIndex - 1 - if (moveToIndex < 0) { moveToIndex = 0 } - if (moveToIndex > this.$swiperTabsRect.length - 1) { moveToIndex = this.$swiperTabsRect.length - 1 } + const offset_x = e.detail.dx + + // 重置差异，计算当前实时索引位置 + const current_offset_x = offset_x % this.$swiperWidth + const current_offset_i = offset_x / this.$swiperWidth + const current_index = this.$animationFinishIndex + current_offset_i.toInt() + + // 边界检查 + let move_to_index = current_index + if (current_offset_x > 0) { + if (move_to_index < this.$swiperTabsRect.length - 1) { + move_to_index += 1 + } + } else if (current_offset_x < 0) { + if (move_to_index > 0) { + move_to_index -= 1 + } + } - const percentage = Math.abs(offsetX % this.$swiperWidth) / this.$swiperWidth - const currentSize = this.$swiperTabsRect[currentIndex] - const moveToSize = this.$swiperTabsRect[moveToIndex] - const indicatorlineL = currentSize.left + (moveToSize.left - currentSize.left) * percentage - const indicatorlineW = currentSize.width + (moveToSize.width - currentSize.width) * percentage + // 计算蛇形线位置和大小 + const percentage = Math.abs(current_offset_x) / this.$swiperWidth + const current_size = this.$swiperTabsRect[current_index] + const move_to_size = this.$swiperTabsRect[move_to_index] + const indicator_line_l = current_size.x + (move_to_size.x - current_size.x) * percentage + const indicator_line_w = current_size.w + (move_to_size.w - current_size.w) * percentage - this.updateTabIndicator(indicatorlineL, indicatorlineW) + // 更新蛇形线位置和大小 + this.updateTabIndicator(indicator_line_l, indicator_line_w) - this.initSwiperItemPage(moveToIndex) + // 首次可见时初始化数据 + this.initSwiperItemPage(move_to_index) }, onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) { this.setSwiperIndex(e.detail.current, true) @@ -117,8 +134,8 @@ const tabs = this.$refs["swipertab"] as INode[] tabs.forEach((node) => { this.$swiperTabsRect.push({ - left: node.offsetLeft, - width: node.offsetWidth + x: node.offsetLeft, + w: node.offsetWidth } as SwiperTabsItem) }) }, @@ -131,7 +148,7 @@ this.initSwiperItemPage(index) if (updateIndicator) { - this.updateTabIndicator(this.$swiperTabsRect[index].left, this.$swiperTabsRect[index].width) + this.updateTabIndicator(this.$swiperTabsRect[index].x, this.$swiperTabsRect[index].w) } }, updateTabIndicator(left : Number, width : Number) { diff --git a/pages/template/swiper-list/swiper-list.uvue b/pages/template/swiper-list/swiper-list.uvue index f0dcfc87..7d813c89 100644 --- a/pages/template/swiper-list/swiper-list.uvue +++ b/pages/template/swiper-list/swiper-list.uvue @@ -25,8 +25,8 @@