Commit 4eb13d97aad45895816f77ccfae3bd027902cc65
1 parent
bb482bf7
tab组件优化
Showing
3 changed files
with
8 additions
and
3 deletions
src/components/htmlBox/htmlBox.less
src/components/tabBox/tabBox.less
| 1 | .tabBox { | 1 | .tabBox { |
| 2 | + padding: 0 30px; | ||
| 3 | + .van-tab--active{ | ||
| 4 | + display: flex; | ||
| 5 | + justify-content: center; | ||
| 6 | + } | ||
| 2 | // tab上线填充 | 7 | // tab上线填充 |
| 3 | .van-tabs--line .van-tabs__wrap{ | 8 | .van-tabs--line .van-tabs__wrap{ |
| 4 | height: 60px; | 9 | height: 60px; |
| @@ -31,7 +36,7 @@ | @@ -31,7 +36,7 @@ | ||
| 31 | border-width: 0; | 36 | border-width: 0; |
| 32 | } | 37 | } |
| 33 | .tabBox_main{ | 38 | .tabBox_main{ |
| 34 | - width: 750px; | 39 | + width: 100%; |
| 35 | height: auto; | 40 | height: auto; |
| 36 | .skeleton { | 41 | .skeleton { |
| 37 | &.brief { | 42 | &.brief { |
src/components/tabBox/tabBox.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="tabBox"> | 2 | <div class="tabBox"> |
| 3 | <!-- 主内容区域 --> | 3 | <!-- 主内容区域 --> |
| 4 | - <van-tabs @change="onChange" swipeable v-model="active"> | 4 | + <van-tabs @change="onChange" swipeable v-model="active" ellipsis swipe-threshold="3"> |
| 5 | <van-tab v-for="(item,index) in tabbar" :key="index" :title="item.title"> | 5 | <van-tab v-for="(item,index) in tabbar" :key="index" :title="item.title"> |
| 6 | 6 | ||
| 7 | </van-tab> | 7 | </van-tab> |