blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-11-04 04:42:09 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
neverland 2017-12-08 15:09:10 +08:00 committed by GitHub
parent 3208d1bb3d
commit f9ae7e6422
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/tabs/index.vue
View File

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

16
packages/vant-css/src/tab.css
View File

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