Merge branch 'dev' into next

src/tabs/Title.js

@@ -11,7 +11,6 @@ export default createComponent({
     color: String,
     title: String,
     isActive: Boolean,
-    ellipsis: Boolean,
     disabled: Boolean,
     scrollable: Boolean,
     activeColor: String,
@@ -44,10 +43,6 @@ export default createComponent({
         style.color = titleColor;
       }
 
-      if (this.scrollable && this.ellipsis) {
-        style.flexBasis = `${88 / this.swipeThreshold}%`;
-      }
-
       return style;
     },
   },
@@ -59,7 +54,7 @@ export default createComponent({
 
     genText() {
       const Text = (
-        <span class={bem('text', { ellipsis: this.ellipsis })}>
+        <span class={bem('text', { ellipsis: !this.scrollable })}>
           {this.renderTitle ? this.renderTitle() : this.title}
         </span>
       );
@@ -86,7 +81,6 @@ export default createComponent({
           bem({
             active: this.isActive,
             disabled: this.disabled,
-            complete: !this.ellipsis,
           }),
         ]}
         style={this.style}

src/tabs/index.js

@@ -42,6 +42,7 @@ export default createComponent({
 
   props: {
     color: String,
+    border: Boolean,
     sticky: Boolean,
     animated: Boolean,
     swipeable: Boolean,
@@ -60,10 +61,6 @@ export default createComponent({
       type: [Number, String],
       default: 0,
     },
-    border: {
-      type: Boolean,
-      default: true,
-    },
     ellipsis: {
       type: Boolean,
       default: true,
@@ -82,7 +79,7 @@ export default createComponent({
     },
     swipeThreshold: {
       type: [Number, String],
-      default: 4,
+      default: 5,
     },
   },
 
@@ -367,7 +364,7 @@ export default createComponent({
   },
 
   render() {
-    const { type, ellipsis, animated, scrollable } = this;
+    const { type, animated, scrollable } = this;
 
     const Nav = this.children.map((item, index) => {
       return (
@@ -382,7 +379,6 @@ export default createComponent({
           color={this.color}
           style={item.titleStyle}
           isActive={index === this.currentIndex}
-          ellipsis={ellipsis}
           disabled={item.disabled}
           scrollable={scrollable}
           renderTitle={item.$slots.title}
@@ -407,7 +403,7 @@ export default createComponent({
         <div
           ref="nav"
           role="tablist"
-          class={bem('nav', [type])}
+          class={bem('nav', [type, { complete: this.scrollable }])}
           style={this.navStyle}
         >
           {this.$slots['nav-left']?.()}

src/tabs/index.less

@@ -53,11 +53,8 @@
 
     &--scrollable {
       .van-tab {
-        flex: 0 0 22%;
-
-        &--complete {
-          flex: 1 0 auto;
-        }
+        flex: 1 0 auto;
+        padding: 0 @padding-sm;
       }
 
       .van-tabs__nav {
@@ -68,6 +65,11 @@
         &::-webkit-scrollbar {
           display: none;
         }
+
+        &--complete {
+          padding-right: 8px;
+          padding-left: 8px;
+        }
       }
     }
   }