From 8eb65dcf4eb796583ef75f9c59712b5ae40d70fc Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Wed, 27 Sep 2023 14:03:16 +0800
Subject: [PATCH] =?UTF-8?q?swiper-list:=20=E8=A1=A5=E5=85=85=E6=B3=A8?=
 =?UTF-8?q?=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/template/swiper-list/swiper-list.uvue | 31 +++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/pages/template/swiper-list/swiper-list.uvue b/pages/template/swiper-list/swiper-list.uvue
index 192fef31..cd40b452 100644
--- a/pages/template/swiper-list/swiper-list.uvue
+++ b/pages/template/swiper-list/swiper-list.uvue
@@ -53,6 +53,7 @@
       }
     },
     onLoad() {
+      // 初始化 8 个页签，宽度依次递增，用于演示在滑动 swiper 过程中指示线宽度的线性变化
       for (let i = 0; i < 8; i++) {
         const space = " ".repeat(i)
         this.swiperList.push({
@@ -68,6 +69,11 @@
       this.setSwiperIndex(0, true)
     },
     methods: {
+      /**
+       * 每个页签的点击事件，点击后设置当前 swiper.
+       * @constructor
+       * @param {number} index - 当前索引，该值应介于 0 和 最大数量之间.
+       */
       onTabClick(index : number) {
         this.setSwiperIndex(index, false)
       },
@@ -98,10 +104,18 @@
         // 通知更新指示线
         this.updateTabIndicator(current_index, move_to_index, percentage)
       },
+      /**
+       * Swiper滑动动画结束事件.
+       */
       onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
         this.setSwiperIndex(e.detail.current, true)
+
+        // 记录上次的索引位置
         this.$animationFinishIndex = e.detail.current
       },
+      /**
+       * 缓存所有页签的左边距和宽度，用于计算指示线在移动过程中的线性变化.
+       */
       cacheTabItemsSize() {
         this.$swiperTabsRect.length = 0;
         const tabs = this.$refs["swipertab"] as Element[]
@@ -112,6 +126,12 @@
           } as SwiperTabsItem)
         })
       },
+      /**
+       * 设置当前 swiper 选中的索引值.
+       * @constructor
+       * @param {number} index - 当前索引，该值应介于 0 和 最大数量之间.
+       * @param {boolean} updateIndicator - 是否更新指示线.
+       */
       setSwiperIndex(index : number, updateIndicator : boolean) {
         if (this.swiperIndex === index) {
           return
@@ -123,15 +143,22 @@
           this.updateTabIndicator(index, index, 1)
         }
       },
+      /**
+       * 更新页签指示线的位置和宽度.
+       * @constructor
+       * @param {number} current_index - 当前索引，该值应介于 0 和 最大数量之间.
+       * @param {number} move_to_index - 目标索引，该值应介于 0 和 最大数量之间.
+       * @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 indicator_line_x = lerpNumber(current_size.x, move_to_size.x, percentage)
         const indicator_line_w = lerpNumber(current_size.w, move_to_size.w, percentage)
 
-        // 更新指示线
+        // 通过 transform 更新指示线，避免重排版
         const x = indicator_line_x + indicator_line_w / 2
         this.$indicatorNode!.style.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
 
-- 
GitLab