feat(Tab): add new prop ellipsis & improve performance (#2334)

fix #1605, fix #2297

packages/tab/index.ts

@@ -50,8 +50,7 @@ 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

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

packages/tabs/index.less

@@ -117,6 +117,10 @@
     .theme(color, '@tab-disabled-text-color');
   }
 
+  &--complete {
+    flex: 1 0 auto !important;
+  }
+
   &__title {
     &__info {
       position: relative !important;

packages/tabs/index.ts

@@ -50,6 +50,8 @@ VantComponent({
       value: -1,
       observer: 'setLine'
     },
+    titleActiveColor: String,
+    titleInactiveColor: String,
     active: {
       type: [String, Number],
       value: 0,
@@ -84,7 +86,7 @@ VantComponent({
       value: 4,
       observer(value) {
         this.setData({
-          scrollable: this.children.length > value
+          scrollable: this.children.length > value || !this.data.ellipsis
         });
       }
     },
@@ -126,7 +128,7 @@ VantComponent({
       const { children = [], data } = this;
       this.setData({
         tabs: children.map((child: TrivialInstance) => child.data),
-        scrollable: children.length > data.swipeThreshold
+        scrollable: this.children.length > data.swipeThreshold || !data.ellipsis
       });
 
       this.setCurrentIndexByName(this.getCurrentName() || data.active);
@@ -173,7 +175,6 @@ VantComponent({
 
       if (
         !isDef(currentIndex) ||
-        currentIndex === data.currentIndex ||
         currentIndex >= children.length ||
         currentIndex < 0
       ) {
@@ -185,7 +186,7 @@ VantComponent({
 
       children.forEach((item: TrivialInstance, index: number) => {
         const active = index === currentIndex;
-        if (active !== item.data.active) {
+        if (active !== item.data.active || !item.inited) {
           item.updateRender(active, this);
         }
       });
@@ -224,8 +225,11 @@ VantComponent({
       } = this.data;
 
       this.getRect('.van-tab', true).then(
-        (rects: WechatMiniprogram.BoundingClientRectCallbackResult[]) => {
+        (rects: WechatMiniprogram.BoundingClientRectCallbackResult[] = []) => {
           const rect = rects[currentIndex];
+          if (rect == null) {
+            return;
+          }
           const width = lineWidth !== -1 ? lineWidth : rect.width / 2;
           const height =
             lineHeight !== -1

packages/tabs/index.wxml

@@ -1,4 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="getters" />
 
 <view class="custom-class {{ utils.bem('tabs', [type]) }}">
   <van-sticky
@@ -24,11 +25,11 @@
             wx:for="{{ tabs }}"
             wx:key="index"
             data-index="{{ index }}"
-            class="van-ellipsis tab-class {{ index === currentIndex ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled }) }}"
+            class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}"
-            style="{{ color && index !== currentIndex && type === 'card' && !item.disabled ? 'color: ' + color : '' }} {{ color && index === currentIndex && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }} {{ scrollable ? ';flex-basis:' + (88 / swipeThreshold) + '%' : '' }}"
+            style="{{ getters.tabStyle(index === currentIndex, ellipsis, color, type, item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable) }}"
             bind:tap="onTap"
           >
-            <view class="van-ellipsis" style="{{ item.titleStyle }}">
+            <view class="{{ ellipsis ? 'van-ellipsis' : '' }}" style="{{ item.titleStyle }}">
               {{ item.title }}
               <van-info
                 wx:if="{{ item.info !== null || item.dot }}"

packages/tabs/index.wxs

@@ -0,0 +1,55 @@
+/* eslint-disable */
+function tabClass(active, ellipsis) {
+  var classes = ['tab-class'];
+
+  if (active) {
+    classes.push('tab-active-class');
+  }
+
+  if (ellipsis) {
+    classes.push('van-ellipsis');
+  }
+
+  return classes.join(' ');
+}
+
+function tabStyle(
+  active,
+  ellipsis,
+  color,
+  type,
+  disabled,
+  activeColor,
+  inactiveColor,
+  swipeThreshold,
+  scrollable
+) {
+  var styles = [];
+  var isCard = type === 'card';
+  // card theme color
+  if (color && isCard) {
+    styles.push('border-color:' + color);
+
+    if (!disabled) {
+      if (active) {
+        styles.push('background-color:' + color);
+      } else {
+        styles.push('color:' + color);
+      }
+    }
+  }
+
+  var titleColor = active ? activeColor : inactiveColor;
+  if (titleColor) {
+    styles.push('color:' + titleColor);
+  }
+
+  if (scrollable && ellipsis) {
+    styles.push('flex-basis:' + 88 / swipeThreshold + '%');
+  }
+
+  return styles.join(';');
+}
+
+module.exports.tabClass = tabClass;
+module.exports.tabStyle = tabStyle;