diff --git a/pages/template/swiper-list/swiper-list.uvue b/pages/template/swiper-list/swiper-list.uvue index 95803abce64c326903ef853c02ec8e4229d639f5..b6b7d8625cc96dca418a01561d5821073bd05fb9 100644 --- a/pages/template/swiper-list/swiper-list.uvue +++ b/pages/template/swiper-list/swiper-list.uvue @@ -2,8 +2,9 @@ - + {{item.title}} @@ -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.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: { /** @@ -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 } } }