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;
    }
}

上个截图清晰一点

image.png

图片资源放置的位置

image.png

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

先搜tab对应类的css

image.png

然后却定相对路径

image.png

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

image.png

在其中加上

$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;