Tab页的基本设置
1.图片设置成UI给的png图片
Tabbar-Page{
.ion-tab-icon-base {
width: 32px !important;
height: 32px !important;
padding: 4px 4px 2px;
}
.ion-tab-icon-md-base {
min-width: 0 !important;
height: 32px;
}
$tabImageName: 'tab1' 'tab2' 'tab3' 'tab4' 'tab5';
@for $i from 1 to 6 {
//for ios
.ion-ios-tab-#{nth($tabImageName, $i)} {
@extend .ion-tab-icon-base;
content: url("./../assets/ui/tabs/#{nth($tabImageName, $i)}_b.png");
}
.ion-ios-tab-#{nth($tabImageName, $i)}-outline {
@extend .ion-tab-icon-base;
content: url("./../assets/ui/tabs/#{nth($tabImageName, $i)}_a.png");
}
// for android
.tabs-md .tab-button[aria-selected=true] {
.ion-md-tab-#{nth($tabImageName, $i)} {
@extend .ion-tab-icon-md-base;
content: url("./../assets/ui/tabs/#{nth($tabImageName, $i)}_b.png");
}
}
.tabs-md .tab-button[aria-selected=false] {
.ion-md-tab-#{nth($tabImageName, $i)} {
@extend .ion-tab-icon-md-base;
content: url("./../assets/ui/tabs/#{nth($tabImageName, $i)}_a.png");
}
}
}
.ion-ios-tab-task,.ion-ios-tab-task-outline,.ion-ios-tab-master,.ion-ios-tab-master-outline{
width: 30px !important;
height: 32px !important;
}
}
上个截图清晰一点

图片资源放置的位置

如果图片资源加载不出来,有个方法,就是去XCode里面去看图片资源和main.css的相对位子
先搜tab对应类的css

然后却定相对路径

2###改变颜色
找到theme文件夹下的variables.scss文件

在其中加上
$tabs-ios-tab-text-color:#999;
$tabs-ios-tab-text-color-active:#da444f;
$tabs-ios-tab-icon-color:#999;
$tabs-ios-tab-icon-color-active:#da444f;
$tabs-md-tab-icon-color-active: #999;
$tabs-md-tab-icon-color-active:#da444f;
$tabs-md-tab-text-color-active: #999;
$tabs-md-tab-text-color-active:#da444f;

最后的效果

网友评论