diff --git a/pages/component/slider/slider-in-swiper.uvue b/pages/component/slider/slider-in-swiper.uvue index a37c96aa427411d858ed08f9a8b604f6acf4738a..13395e73f0f0af84134c1302325e09ef8f1670f7 100644 --- a/pages/component/slider/slider-in-swiper.uvue +++ b/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 => { + 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 } } }