From bcbc112d2b7fd0b053dcf6ec08bf5e3e02a7777d Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Mon, 15 Jan 2024 11:08:09 +0800
Subject: [PATCH] =?UTF-8?q?swiper-list:=20=E7=A7=BB=E9=99=A4=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=E5=90=8D=E5=89=8D=E9=9D=A2=E7=9A=84$,=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20web?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/template/swiper-list/swiper-list.uvue | 46 ++++++++++-----------
 1 file changed, 22 insertions(+), 24 deletions(-)

diff --git a/pages/template/swiper-list/swiper-list.uvue b/pages/template/swiper-list/swiper-list.uvue
index a2b3d8a2..8f00df76 100644
--- a/pages/template/swiper-list/swiper-list.uvue
+++ b/pages/template/swiper-list/swiper-list.uvue
@@ -45,12 +45,12 @@
     data() {
       return {
         swiperList: [] as SwiperViewItem[],
-        swiperIndex: -1,
-        $tabScrollView: null as null | UniElement,
-        $indicatorNode: null as null | UniElement,
-        $animationFinishIndex: 0,
-        $swiperWidth: 0,
-        $swiperTabsRect: [] as SwiperTabsItem[]
+        swiperIndex: 0,
+        tabScrollView: null as null | UniElement,
+        indicatorNode: null as null | UniElement,
+        animationFinishIndex: 0,
+        swiperWidth: 0,
+        swiperTabsRect: [] as SwiperTabsItem[]
       }
     },
     onLoad() {
@@ -63,11 +63,11 @@
       }
     },
     onReady() {
-      this.$tabScrollView = this.$refs['tabScroll'] as UniElement
-      this.$indicatorNode = this.$refs['indicator'] as UniElement
-      this.$swiperWidth = (this.$refs["swiper"] as UniElement).getBoundingClientRect().width
+      this.tabScrollView = this.$refs['tabScroll'] as UniElement
+      this.indicatorNode = this.$refs['indicator'] as UniElement
+      this.swiperWidth = (this.$refs["swiper"] as UniElement).getBoundingClientRect().width
       this.cacheTabItemsSize()
-      this.setSwiperIndex(0, true)
+      this.updateTabIndicator(this.swiperIndex, this.swiperIndex, 1)
     },
     methods: {
       /**
@@ -87,9 +87,9 @@
         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 + Math.floor(current_offset_i)
+        const current_offset_x = offset_x % this.swiperWidth
+        const current_offset_i = offset_x / this.swiperWidth
+        const current_index = this.animationFinishIndex + parseInt(current_offset_i + '')
 
         // 计算目标索引及边界检查
         let move_to_index = current_index
@@ -100,7 +100,7 @@
         }
 
         // 计算偏移百分比
-        const percentage = Math.abs(current_offset_x) / this.$swiperWidth
+        const percentage = Math.abs(current_offset_x) / this.swiperWidth
 
         // 通知更新指示线
         this.updateTabIndicator(current_index, move_to_index, percentage)
@@ -112,16 +112,16 @@
         this.setSwiperIndex(e.detail.current, true)
 
         // 记录上次的索引位置
-        this.$animationFinishIndex = e.detail.current
+        this.animationFinishIndex = e.detail.current
       },
       /**
        * 缓存所有页签的左边距和宽度，用于计算指示线在移动过程中的线性变化.
        */
       cacheTabItemsSize() {
-        this.$swiperTabsRect.length = 0;
+        this.swiperTabsRect.length = 0;
         const tabs = this.$refs["swipertab"] as UniElement[]
         tabs.forEach((node) => {
-          this.$swiperTabsRect.push({
+          this.swiperTabsRect.push({
             x: node.offsetLeft,
             w: node.offsetWidth
           } as SwiperTabsItem)
@@ -152,8 +152,8 @@
        * @param {number} percentage - 偏移百分比，应介于 0 和 1 之间，用于计算在移动过程中的线性值.
        */
       updateTabIndicator(current_index : number, move_to_index : number, percentage : number) {
-        const current_size = this.$swiperTabsRect[current_index]
-        const move_to_size = this.$swiperTabsRect[move_to_index]
+        const current_size = this.swiperTabsRect[current_index]
+        const move_to_size = this.swiperTabsRect[move_to_index]
 
         // 计算指示线 位置 和 宽度 在移动过程中的线性值
         const indicator_line_x = lerpNumber(current_size.x, move_to_size.x, percentage)
@@ -161,13 +161,11 @@
 
         // 通过 transform 更新指示线，避免重排版
         const x = indicator_line_x + indicator_line_w / 2
-        this.$indicatorNode!.style.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
+        this.indicatorNode!.style.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
 
         // 滚动到水平中心位置
-        const scroll_x = x - this.$swiperWidth / 2
-        if(this.$tabScrollView !== null){
-          this.$tabScrollView!.scrollLeft = scroll_x
-        }
+        const scroll_x = x - this.swiperWidth / 2
+        this.tabScrollView!.scrollLeft = scroll_x
       }
     }
   }
-- 
GitLab