slider-in-swiper: 适配微信

pages/component/slider/slider-in-swiper.uvue

@@ -83,11 +83,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.updateTabIndicator(this.swiperIndex, this.swiperIndex, 1)
+      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: {
       /**
@@ -139,15 +142,17 @@
       /**
        * 缓存所有页签的左边距和宽度，用于计算指示线在移动过程中的线性变化.
        */
-      cacheTabItemsSize() {
-        this.swiperTabsRect.length = 0;
-        const tabs = this.$refs["swipertab"] as UniElement[]
-        tabs.forEach((node) => {
-          this.swiperTabsRect.push({
-            x: node.offsetLeft,
-            w: node.offsetWidth
-          } as SwiperTabsItem)
-        })
+      async cacheTabItemsSize() {
+        this.swiperTabsRect.length = 0;
+        const tabs = this.$refs["swipertab"] as UniElement[]
+        for (let i = 0; i < tabs.length; i++) {
+          const element = tabs[i];
+          const rect = await element.getBoundingClientRectAsync()!
+          this.swiperTabsRect.push({
+            x: rect.left,
+            w: rect.width
+          } as SwiperTabsItem)
+        }
       },
       /**
        * 设置当前 swiper 选中的索引值.
@@ -186,7 +191,7 @@
         const x = indicator_line_x + indicator_line_w / 2
         this.indicatorNode?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
         // #endif
-        // #ifdef WEB
+        // #ifdef WEB || MP
         // TODO chrome windows系统 transform scaleX渲染bug
         const x = indicator_line_x
         this.indicatorNode?.style?.setProperty('width', `${indicator_line_w}px`)
@@ -194,8 +199,16 @@
         // #endif
 
         // 滚动到水平中心位置
-        const scroll_x = x - this.swiperWidth / 2
-        this.tabScrollView!.scrollLeft = scroll_x
+        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
       }
     }
   }