fix(Tab): fix getComputedName of undefined error (#2376)

fix #2335

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
       });
     },
 

packages/tab/index.wxml

@@ -1,8 +1,8 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
 <view
-  wx:if="{{ shouldRender }}"
   class="custom-class {{ utils.bem('tab__pane', { active, inactive: !active }) }}"
+  style="{{ shouldShow ? '' : 'display: none;' }}"
 >
-  <slot />
+  <slot wx:if="{{ shouldRender }}" />
 </view>

packages/tabs/index.less

@@ -73,11 +73,14 @@
 
   &__track {
     position: relative;
-    display: flex;
     width: 100%;
     height: 100%;
+
+    &--animated {
+      display: flex;
       transition-property: transform;
     }
+  }
 
   &__content {
     overflow: hidden;

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;
         `
       });
     },

packages/tabs/index.wxml

@@ -53,7 +53,7 @@
     bind:touchend="onTouchEnd"
     bind:touchcancel="onTouchEnd"
   >
-    <view class="van-tabs__track" style="{{ trackStyle }}">
+    <view class="{{ utils.bem('tabs__track', [{ animated }]) }} van-tabs__track" style="{{ trackStyle }}">
       <slot />
     </view>
   </view>