fix(tab): rollback line style refactor (#3511)

fix #3492, fix #3504

packages/tabs/index.ts

@@ -26,13 +26,13 @@ VantComponent({
         }
       );
       this.updateTabs();
-    }
+    },
   },
 
   props: {
     color: {
       type: String,
-      observer: 'setLine'
+      observer: 'setLine',
     },
     sticky: Boolean,
     animated: {
@@ -41,18 +41,18 @@ VantComponent({
         this.children.forEach((child: TrivialInstance, index: number) =>
           child.updateRender(index === this.data.currentIndex, this)
         );
-      }
+      },
     },
     swipeable: Boolean,
     lineWidth: {
       type: [String, Number],
       value: -1,
-      observer: 'setLine'
+      observer: 'setLine',
     },
     lineHeight: {
       type: [String, Number],
       value: -1,
-      observer: 'setLine'
+      observer: 'setLine',
     },
     titleActiveColor: String,
     titleInactiveColor: String,
@@ -63,45 +63,45 @@ VantComponent({
         if (name !== this.getCurrentName()) {
           this.setCurrentIndexByName(name);
         }
-      }
+      },
     },
     type: {
       type: String,
-      value: 'line'
+      value: 'line',
     },
     border: {
       type: Boolean,
-      value: true
+      value: true,
     },
     ellipsis: {
       type: Boolean,
-      value: true
+      value: true,
     },
     duration: {
       type: Number,
-      value: 0.3
+      value: 0.3,
     },
     zIndex: {
       type: Number,
-      value: 1
+      value: 1,
     },
     swipeThreshold: {
       type: Number,
       value: 5,
       observer(value) {
         this.setData({
-          scrollable: this.children.length > value || !this.data.ellipsis
+          scrollable: this.children.length > value || !this.data.ellipsis,
         });
-      }
+      },
     },
     offsetTop: {
       type: Number,
-      value: 0
+      value: 0,
     },
     lazyRender: {
       type: Boolean,
-      value: true
+      value: true,
-    }
+    },
   },
 
   data: {
@@ -111,7 +111,7 @@ VantComponent({
     scrollable: false,
     trackStyle: '',
     currentIndex: null,
-    container: null
+    container: null,
   },
 
   mounted() {
@@ -124,7 +124,7 @@ VantComponent({
   methods: {
     updateContainer() {
       this.setData({
-        container: () => this.createSelectorQuery().select('.van-tabs')
+        container: () => this.createSelectorQuery().select('.van-tabs'),
       });
     },
 
@@ -132,7 +132,8 @@ VantComponent({
       const { children = [], data } = this;
       this.setData({
         tabs: children.map((child: TrivialInstance) => child.data),
-        scrollable: this.children.length > data.swipeThreshold || !data.ellipsis
+        scrollable:
+          this.children.length > data.swipeThreshold || !data.ellipsis,
       });
 
       this.setCurrentIndexByName(this.getCurrentName() || data.active);
@@ -150,7 +151,7 @@ VantComponent({
       this.$emit(eventName, {
         index: currentChild.index,
         name: currentChild.getComputedName(),
-        title: currentChild.data.title
+        title: currentChild.data.title,
       });
     },
 
@@ -235,11 +236,12 @@ VantComponent({
         duration,
         currentIndex,
         lineWidth,
-        lineHeight
+        lineHeight,
       } = this.data;
 
-      this.getRect(`.van-tab--${currentIndex}`).then(
+      this.getRect('.van-tab', true).then(
-        (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
+        (rects: WechatMiniprogram.BoundingClientRectCallbackResult[] = []) => {
+          const rect = rects[currentIndex];
           if (rect == null) {
             return;
           }
@@ -251,7 +253,11 @@ VantComponent({
                 )};`
               : '';
 
-          const left = rect.left + (rect.width - width) / 2;
+          let left = rects
+            .slice(0, currentIndex)
+            .reduce((prev, curr) => prev + curr.width, 0);
+
+          left += (rect.width - width) / 2;
 
           const transition = skipTransition
             ? ''
@@ -265,7 +271,7 @@ VantComponent({
             -webkit-transform: translateX(${left}px);
             transform: translateX(${left}px);
             ${transition}
-          `
+          `,
           });
         }
       );
@@ -281,7 +287,7 @@ VantComponent({
 
       Promise.all([
         this.getRect('.van-tab', true),
-        this.getRect('.van-tabs__nav')
+        this.getRect('.van-tabs__nav'),
       ]).then(
         ([tabRects, navRect]: [
           WechatMiniprogram.BoundingClientRectCallbackResult[],
@@ -293,7 +299,7 @@ VantComponent({
             .reduce((prev, curr) => prev + curr.width, 0);
 
           this.setData({
-            scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2
+            scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2,
           });
         }
       );
@@ -352,6 +358,6 @@ VantComponent({
       }
 
       return -1;
-    }
+    },
-  }
+  },
 });

packages/tabs/index.wxml

@@ -25,7 +25,7 @@
             wx:for="{{ tabs }}"
             wx:key="index"
             data-index="{{ index }}"
-            class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', ['' + index, { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }]) }}"
+            class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}"
             style="{{ getters.tabStyle(index === currentIndex, ellipsis, color, type, item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable) }}"
             bind:tap="onTap"
           >