[bugfix] Tab: active tab should keep center (#394)

packages/tabs/index.vue

@@ -35,6 +35,7 @@ export default {
   name: 'van-tabs',
 
   props: {
+    sticky: Boolean,
     active: {
       type: [Number, String],
       default: 0
@@ -50,14 +51,10 @@ export default {
     swipeThreshold: {
       type: Number,
       default: 4
-    },
-    sticky: Boolean
+    }
   },
 
   data() {
-    /* istanbul ignore next */
-    this.winWidth = this.$isServer ? 0 : window.innerWidth;
-
     return {
       tabs: [],
       position: 'content-top',
@@ -183,19 +180,10 @@ export default {
 
       const tab = this.$refs.tabs[this.curActive];
       const { nav } = this.$refs;
-      const { winWidth } = this;
-      const { scrollLeft } = nav;
+      const { scrollLeft, offsetWidth: navWidth } = nav;
       const { offsetLeft, offsetWidth: tabWidth } = tab;
 
-      // out of right side
-      /* istanbul ignore next */
-      if ((winWidth + scrollLeft - offsetLeft - tabWidth * 1.8) < 0) {
-        this.scrollTo(nav, scrollLeft, offsetLeft + tabWidth * 1.8 - winWidth);
-      }
-      // out of left side
-      else if (offsetLeft < (scrollLeft + tabWidth * 0.8)) {
-        this.scrollTo(nav, scrollLeft, offsetLeft - tabWidth * 0.8);
-      }
+      this.scrollTo(nav, scrollLeft, offsetLeft - (navWidth - tabWidth) / 2);
     },
 
     // animate the scrollLeft of nav

packages/vant-css/src/tab.css

@@ -31,7 +31,8 @@ $van-tabs-card-height: 28px;
     background-color: $white;
 
     &--line {
-      height: $van-tabs-line-height;
+      height: 100%;
+      padding-bottom: 15px; /* 15px padding to hide scrollbar in mobile safari */
     }
 
     &--card {
@@ -60,7 +61,7 @@ $van-tabs-card-height: 28px;
   &__nav-bar {
     z-index: 1;
     left: 0;
-    bottom: 0;
+    bottom: 15px;
     height: 2px;
     position: absolute;
     background-color: $red;
@@ -72,8 +73,9 @@ $van-tabs-card-height: 28px;
     }
 
     .van-tabs__nav {
+      overflow: hidden;
       overflow-x: auto;
-      overflow-y: hidden;
+      -webkit-overflow-scrolling: touch;
 
       &::-webkit-scrollbar {
         display: none;
@@ -83,10 +85,18 @@ $van-tabs-card-height: 28px;
 
   &--line {
     padding-top: $van-tabs-line-height;
+
+    .van-tabs__wrap {
+      height: $van-tabs-line-height;
+    }
   }
 
   &--card {
     padding-top: $van-tabs-card-height;
+
+    .van-tabs__wrap {
+      height: $van-tabs-card-height;
+    }
   }
 }