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"
>
-
+