swiper-list: 适配微信

pages/template/swiper-list/swiper-list.uvue

@@ -2,8 +2,9 @@
   <view class="swiper-list">
     <scroll-view ref="tabScroll" class="swiper-tabs" direction="horizontal" :show-scrollbar="false">
       <view class="flex-row">
-        <text ref="swipertab" space="nbsp" class="swiper-tabs-item" :class="swiperIndex==index ? 'swiper-tabs-item-active' : ''"
-          v-for="(item, index) in swiperList" :key="index" @click="onTabClick(index)">
+        <text ref="swipertab" space="nbsp" class="swiper-tabs-item"
+          :class="swiperIndex==index ? 'swiper-tabs-item-active' : ''" v-for="(item, index) in swiperList" :key="index"
+          @click="onTabClick(index)">
           {{item.title}}
         </text>
       </view>
@@ -63,11 +64,14 @@
       }
     },
     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.cacheTabItemsSize()
+      this.tabScrollView = this.$refs['tabScroll'] as UniElement;
+      this.indicatorNode = this.$refs['indicator'] as UniElement;
+      (this.$refs["swiper"] as UniElement).getBoundingClientRectAsync().then((res : DOMRect) : Promise<void> => {
+        this.swiperWidth = res.width
+        return this.cacheTabItemsSize()
+      }).then(() => {
         this.updateTabIndicator(this.swiperIndex, this.swiperIndex, 1)
+      });
     },
     methods: {
       /**
@@ -119,15 +123,17 @@
       /**
        * 缓存所有页签的左边距和宽度，用于计算指示线在移动过程中的线性变化.
        */
-      cacheTabItemsSize() {
+      async cacheTabItemsSize() {
         this.swiperTabsRect.length = 0;
         const tabs = this.$refs["swipertab"] as UniElement[]
-        tabs.forEach((node) => {
+        for (let i = 0; i < tabs.length; i++) {
+          const element = tabs[i];
+          const rect = await element.getBoundingClientRectAsync()
           this.swiperTabsRect.push({
-            x: node.offsetLeft,
-            w: node.offsetWidth
+            x: rect.left,
+            w: rect.width
           } as SwiperTabsItem)
-        })
+        }
       },
       /**
        * 设置当前 swiper 选中的索引值.
@@ -162,7 +168,7 @@
         const indicator_line_w = lerpNumber(current_size.w, move_to_size.w, percentage)
 
         // 通过 transform 更新指示线，避免重排版
-        // #ifdef APP
+        // #ifdef APP || MP
         const x = indicator_line_x + indicator_line_w / 2
         this.indicatorNode?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
         // #endif
@@ -175,7 +181,15 @@
 
         // 滚动到水平中心位置
         const scroll_x = x - this.swiperWidth / 2
+        // app 平台后续支持 scrollTo()
+        // #ifndef MP-WEIXIN
         this.tabScrollView!.scrollLeft = scroll_x
+        // #endif
+        // #ifdef MP-WEIXIN
+        this.tabScrollView!.scrollTo({
+          left: scroll_x
+        })
+        // #endif
       }
     }
   }