[Improment] improve Tab sticky fluency (#388)

docs/demos/views/tab.vue

@@ -99,7 +99,7 @@ export default {
 
 <style lang="postcss">
 .demo-tab {
-  margin-bottom: 1000px;
+  margin-bottom: 700px;
 
   .van-tab__pane {
     background-color: #fff;
@@ -121,5 +121,11 @@ export default {
     height: 50px;
     line-height: 50px;
   }
+
+  .van-doc-demo-block:last-child {
+    .van-tab__pane {
+      padding: 50px 20px;
+    }
+  }
 }
 </style>

packages/tabs/index.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="van-tabs" :class="[`van-tabs--${type}`, { 'van-tabs--fixed': fixed }]">
+  <div class="van-tabs" :class="[`van-tabs--${type}`]">
-    <div class="van-tabs__wrap" :class="{ 'van-tabs--scrollbale': scrollable, 'van-hairline--top-bottom': type === 'line' }">
+    <div class="van-tabs__wrap" :class="[`van-tabs__wrap--${position}`, {
+      'van-tabs--scrollable': scrollable,
+      'van-hairline--top-bottom': type === 'line'
+    }]">
       <div class="van-tabs__nav" :class="`van-tabs__nav--${type}`" ref="nav">
         <div v-if="type === 'line'" class="van-tabs__nav-bar" :style="navBarStyle" />
         <div
@@ -57,7 +60,7 @@ export default {
 
     return {
       tabs: [],
-      fixed: false,
+      position: 'content-top',
       curActive: 0,
       navBarStyle: {}
     };
@@ -92,7 +95,7 @@ export default {
     }
   },
 
-  destoryed() {
+  beforeDestroy() {
     /* istanbul ignore next */
     if (this.sticky) {
       this.scrollHandler(false);
@@ -111,12 +114,23 @@ export default {
     scrollHandler(init) {
       this.scrollEl = this.scrollEl || scrollUtils.getScrollEventTarget(this.$el);
       this.scrollEl[init ? 'addEventListener' : 'removeEventListener']('scroll', this.onScroll);
-      this.onScroll();
+      if (init) {
+        this.onScroll();
+      }
     },
 
-    // fixed tab when scrollTop > distance to top
+    // adjust tab position
     onScroll() {
-      this.fixed = scrollUtils.getScrollTop(this.scrollEl) > scrollUtils.getElementTop(this.$el);
+      const scrollTop = scrollUtils.getScrollTop(this.scrollEl);
+      const elTopToPageTop = scrollUtils.getElementTop(this.$el);
+      const elBottomToPageTop = elTopToPageTop + this.$el.offsetHeight - this.$refs.nav.offsetHeight;
+      if (scrollTop > elBottomToPageTop) {
+        this.position = 'content-bottom';
+      } else if (scrollTop > elTopToPageTop) {
+        this.position = 'page-top';
+      } else {
+        this.position = 'content-top';
+      }
     },
 
     // update nav bar style

packages/vant-css/src/field.css

@@ -85,6 +85,10 @@
     display: block;
     width: 100%;
     resize: none;
+
+    &[disabled] {
+      background-color: transparent;
+    }
   }
 
   &__icon {

packages/vant-css/src/tab.css

@@ -7,10 +7,27 @@ $van-tabs-card-height: 28px;
 .van-tabs {
   position: relative;
 
+  &__wrap {
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    position: absolute;
+
+    &--page-top {
+      position: fixed;
+    }
+
+    &--content-bottom {
+      top: auto;
+      bottom: 0;
+    }
+  }
+
   &__nav {
     display: flex;
-    position: relative;
     user-select: none;
+    position: relative;
     background-color: $white;
 
     &--line {
@@ -49,13 +66,13 @@ $van-tabs-card-height: 28px;
     background-color: $red;
   }
 
-  &--scrollbale {
+  &--scrollable {
     .van-tab {
       flex: 0 0 22%;
     }
 
     .van-tabs__nav {
-      overflow-y: auto;
+      overflow-x: auto;
       -webkit-overflow-scrolling: touch;
 
       &::-webkit-scrollbar {
@@ -65,21 +82,12 @@ $van-tabs-card-height: 28px;
     }
   }
 
-  &--fixed {
+  &--line {
-    .van-tabs__wrap {
+    padding-top: $van-tabs-line-height;
-      top: 0;
+  }
-      left: 0;
-      right: 0;
-      position: fixed;
-    }
 
-    &.van-tabs--line {
+  &--card {
-      padding-top: $van-tabs-line-height;
+    padding-top: $van-tabs-card-height;
-    }
-
-    &.van-tabs--card {
-      padding-top: $van-tabs-card-height;
-    }
   }
 }
 

test/unit/specs/tabs.spec.js

@@ -125,7 +125,7 @@ describe('Tabs', () => {
     wrapper.vm.sticky = false;
 
     setTimeout(() => {
-      expect(wrapper.vm.$children[0].fixed).to.be.false;
+      expect(wrapper.vm.$children[0].position).to.equal('content-top');
       done();
     }, 30);
   });