diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts index af2eee02..12cca30f 100644 --- a/packages/tabs/index.ts +++ b/packages/tabs/index.ts @@ -49,6 +49,10 @@ VantComponent({ type: null, value: 0, observer(name) { + if (!this.skipInit) { + this.skipInit = true; + } + if (name !== this.getCurrentName()) { this.setCurrentIndexByName(name); } @@ -94,8 +98,9 @@ VantComponent({ scrollLeft: 0, scrollable: false, currentIndex: 0, - container: (null as unknown) as () => WechatMiniprogram.NodesRef, + container: null as unknown as () => WechatMiniprogram.NodesRef, skipTransition: true, + scrollWithAnimation: false, lineOffsetLeft: 0, }, @@ -105,8 +110,10 @@ VantComponent({ container: () => this.createSelectorQuery().select('.van-tabs'), }); - this.resize(true); - this.scrollIntoView(); + if (!this.skipInit) { + this.resize(); + this.scrollIntoView(); + } }); }, @@ -191,10 +198,12 @@ VantComponent({ const shouldEmitChange = data.currentIndex !== null; this.setData({ currentIndex }); - nextTick(() => { + requestAnimationFrame(() => { this.resize(); this.scrollIntoView(); + }); + nextTick(() => { this.trigger('input'); if (shouldEmitChange) { this.trigger('change'); @@ -210,12 +219,12 @@ VantComponent({ } }, - resize(skipTransition = false) { + resize() { if (this.data.type !== 'line') { return; } - const { currentIndex, ellipsis } = this.data; + const { currentIndex, ellipsis, skipTransition } = this.data; Promise.all([ getAllRect(this, '.van-tab'), @@ -234,16 +243,19 @@ VantComponent({ lineOffsetLeft += (rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8); - this.setData({ - lineOffsetLeft, - skipTransition, - }); + this.setData({ lineOffsetLeft }); + + if (skipTransition) { + nextTick(() => { + this.setData({ skipTransition: false }); + }); + } }); }, // scroll active tab into view scrollIntoView() { - const { currentIndex, scrollable } = this.data; + const { currentIndex, scrollable, scrollWithAnimation } = this.data; if (!scrollable) { return; @@ -261,6 +273,12 @@ VantComponent({ this.setData({ scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2, }); + + if (!scrollWithAnimation) { + nextTick(() => { + this.setData({ scrollWithAnimation: true }); + }); + } }); }, diff --git a/packages/tabs/index.wxml b/packages/tabs/index.wxml index 0dc346b2..f76dd63f 100644 --- a/packages/tabs/index.wxml +++ b/packages/tabs/index.wxml @@ -14,7 +14,7 @@