blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Tabbar: optimize layout (#761)

Browse Source
This commit is contained in:
neverland 2018-10-15 11:09:41 +08:00 committed by GitHub
parent fd7fce15ea
commit 2b969f5a53
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/tabbar-item/index.less
View File

@ -1,7 +1,10 @@
@import '../common/style/var.less'; @import '../common/style/var.less';
:host {
flex: 1;
}
.van-tabbar-item { .van-tabbar-item {
float: left;
color: #666; color: #666;
height: 100%; height: 100%;
display: flex; display: flex;

10
packages/tabbar-item/index.ts
View File

@ -13,8 +13,7 @@ VantComponent({
}, },
data: { data: {
active: false, active: false
count: 0
}, },
methods: { methods: {
@ -26,10 +25,9 @@ VantComponent({
this.$emit('click'); this.$emit('click');
}, },
setActive(data) { setActive(active) {
const { active, count } = this.data; if (this.data.active !== active) {
if (active !== data.active || count !== data.count) { this.setData({ active });
this.setData(data);
} }
} }
} }

1
packages/tabbar-item/index.wxml
View File

@ -1,6 +1,5 @@
<view <view
class="van-tabbar-item {{ active ? 'van-tabbar-item--active' : '' }}" class="van-tabbar-item {{ active ? 'van-tabbar-item--active' : '' }}"
style="{{ count ? 'width: ' + 100 / count + '%' : '' }}"
bind:tap="onClick" bind:tap="onClick"
> >
<view class="van-tabbar-item__icon {{ dot ? 'van-tabbar-item__icon--dot' : '' }}"> <view class="van-tabbar-item__icon {{ dot ? 'van-tabbar-item__icon--dot' : '' }}">

3
packages/tabbar/index.less
View File

@ -3,7 +3,8 @@
.van-tabbar { .van-tabbar {
width: 100%; width: 100%;
height: 50px; height: 50px;
background-color: #fff; display: flex;
background-color: @white;
&--fixed { &--fixed {
left: 0; left: 0;

5
packages/tabbar/index.ts
View File

@ -49,10 +49,7 @@ VantComponent({
methods: { methods: {
setActiveItem() { setActiveItem() {
this.data.items.forEach((item, index) => { this.data.items.forEach((item, index) => {
item.setActive({ item.setActive(index === this.data.currentActive);
active: index === this.data.currentActive,
count: this.data.items.length
});
}); });
}, },