diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue index bc62c1106..0ee3520a7 100644 --- a/packages/tabs/index.vue +++ b/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 diff --git a/packages/vant-css/src/tab.css b/packages/vant-css/src/tab.css index 50b7f3037..6f27c8354 100644 --- a/packages/vant-css/src/tab.css +++ b/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; + } } }