refactor(tab): adjust padding in complete mode (#3459)

* refactor(tab): adjust padding in complete mode

* docs(tab): update readme

packages/tab/README.md

@@ -55,7 +55,7 @@ Page({
 
 ### 横向滚动
 
-多于 4 个标签时，Tab 可以横向滚动
+多于 5 个标签时，Tab 可以横向滚动
 
 ```html
 <van-tabs active="{{ active }}">
@@ -195,7 +195,7 @@ Page({
 | duration | 动画时间 (单位秒) | _number_ | `0.3` | - |
 | line-width | 底部条宽度 (px) | _string \| number_ | 与当前标签等宽 | - |
 | line-height | 底部条高度 (px) | _string \| number_ | `3px` | - |
-| swipe-threshold | 滚动阈值，设置标签数量超过多少个可滚动 | _number_ | `4` | - |
+| swipe-threshold | 滚动阈值，设置标签数量超过多少个可滚动 | _number_ | `5` | - |
 | animated | 是否使用动画切换 Tabs | _boolean_ | `false` | - |
 | ellipsis | 是否省略过长的标题文字 | _boolean_ | `true` | - |
 | sticky | 是否使用粘性定位布局 | _boolean_ | `false` | - |

packages/tabs/index.less

@@ -12,6 +12,18 @@
     &--scrollable {
       .van-tab {
         flex: 0 0 22%;
+
+        &--complete {
+          flex: 1 0 auto !important;
+          padding: 0 @padding-sm;
+        }
+      }
+
+      .van-tabs__nav {
+        &--complete {
+          padding-right: 8px;
+          padding-left: 8px;
+        }
       }
     }
   }
@@ -125,10 +137,6 @@
     .theme(color, '@tab-disabled-text-color');
   }
 
-  &--complete {
-    flex: 1 0 auto !important;
-  }
-
   &__title {
     &__info {
       position: relative !important;

packages/tabs/index.ts

@@ -87,7 +87,7 @@ VantComponent({
     },
     swipeThreshold: {
       type: Number,
-      value: 4,
+      value: 5,
       observer(value) {
         this.setData({
           scrollable: this.children.length > value || !this.data.ellipsis
@@ -238,9 +238,8 @@ VantComponent({
         lineHeight
       } = this.data;
 
-      this.getRect('.van-tab', true).then(
-        (rects: WechatMiniprogram.BoundingClientRectCallbackResult[] = []) => {
-          const rect = rects[currentIndex];
+      this.getRect(`.van-tab--${currentIndex}`).then(
+        (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
           if (rect == null) {
             return;
           }
@@ -252,11 +251,7 @@ VantComponent({
                 )};`
               : '';
 
-          let left = rects
-            .slice(0, currentIndex)
-            .reduce((prev, curr) => prev + curr.width, 0);
-
-          left += (rect.width - width) / 2;
+          const left = rect.left + (rect.width - width) / 2;
 
           const transition = skipTransition
             ? ''

packages/tabs/index.wxml

@@ -19,13 +19,13 @@
         class="{{ utils.bem('tabs__scroll', [type]) }}"
         style="{{ color ? 'border-color: ' + color : '' }}"
       >
-        <view class="{{ utils.bem('tabs__nav', [type]) }} nav-class" style="{{ getters.tabCardTypeBorderStyle(color, type) }}">
+        <view class="{{ utils.bem('tabs__nav', [type, { complete: !ellipsis }]) }} nav-class" style="{{ getters.tabCardTypeBorderStyle(color, type) }}">
           <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" />
           <view
             wx:for="{{ tabs }}"
             wx:key="index"
             data-index="{{ index }}"
-            class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}"
+            class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', ['' + index, { 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"
           >