diff --git a/packages/tab/index.ts b/packages/tab/index.ts index 68d42702..9e6bf76e 100644 --- a/packages/tab/index.ts +++ b/packages/tab/index.ts @@ -50,7 +50,8 @@ VantComponent({ this.inited = this.inited || active; this.setData({ active, - shouldRender: this.inited || !parentData.lazyRender + shouldRender: this.inited || !parentData.lazyRender, + shouldShow: active || parentData.animated }); }, diff --git a/packages/tab/index.wxml b/packages/tab/index.wxml index 0fda4a84..f5e99f21 100644 --- a/packages/tab/index.wxml +++ b/packages/tab/index.wxml @@ -1,8 +1,8 @@ - + diff --git a/packages/tabs/index.less b/packages/tabs/index.less index 1a8fddd9..81deb92e 100644 --- a/packages/tabs/index.less +++ b/packages/tabs/index.less @@ -73,10 +73,13 @@ &__track { position: relative; - display: flex; width: 100%; height: 100%; - transition-property: transform; + + &--animated { + display: flex; + transition-property: transform; + } } &__content { diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts index c45678e6..85d6431d 100644 --- a/packages/tabs/index.ts +++ b/packages/tabs/index.ts @@ -37,7 +37,10 @@ VantComponent({ sticky: Boolean, animated: { type: Boolean, - observer: 'setTrack' + observer() { + this.setTrack(); + this.children.forEach((child: TrivialInstance) => child.updateRender()); + } }, swipeable: Boolean, lineWidth: { @@ -139,6 +142,10 @@ VantComponent({ const child = this.children[currentIndex]; + if (!isDef(child)) { + return; + } + this.$emit(eventName, { index: currentIndex, name: child.getComputedName(), @@ -181,9 +188,6 @@ VantComponent({ return; } - const shouldEmitChange = data.currentIndex !== null; - this.setData({ currentIndex }); - children.forEach((item: TrivialInstance, index: number) => { const active = index === currentIndex; if (active !== item.data.active || !item.inited) { @@ -191,6 +195,13 @@ VantComponent({ } }); + if (currentIndex === data.currentIndex) { + return; + } + + const shouldEmitChange = data.currentIndex !== null; + this.setData({ currentIndex }); + wx.nextTick(() => { this.setLine(); this.setTrack(); @@ -263,11 +274,15 @@ VantComponent({ setTrack() { const { animated, duration, currentIndex } = this.data; + if (!animated) { + return; + } + this.setData({ trackStyle: ` transform: translate3d(${-100 * currentIndex}%, 0, 0); - -webkit-transition-duration: ${animated ? duration : 0}s; - transition-duration: ${animated ? duration : 0}s; + -webkit-transition-duration: ${duration}s; + transition-duration: ${duration}s; ` }); }, diff --git a/packages/tabs/index.wxml b/packages/tabs/index.wxml index 27d44c81..ed8f0d9c 100644 --- a/packages/tabs/index.wxml +++ b/packages/tabs/index.wxml @@ -53,7 +53,7 @@ bind:touchend="onTouchEnd" bind:touchcancel="onTouchEnd" > - +