ionic2 自定义tabs背景

 

tabs.html

<ion-tabs tabsPlacement="bottom" class="tabs-menu">
    <ion-tab [root]="tab1Root" tabIcon="tab-tab1" ></ion-tab>
    <ion-tab [root]="tab2Root" tabIcon="tab-tab2" ></ion-tab>
    <ion-tab [root]="tab3Root" tabIcon="tab-tab3" ></ion-tab>
    <ion-tab [root]="tab4Root" tabIcon="tab-tab4" ></ion-tab>
</ion-tabs>

由于我之前放在我自己新增的tabs.scss里面一直报错，但是我把样式放在app.scss就好了，具体原因我还不知道，找到原因再来更新

app.scss

.ion-tab-icon-base {
  width: 2.75rem;
  height: 2.75rem;
}
.ion-tab-icon-md-base {
  min-width: 0 !important;
  height: 2.75rem;
}
/*写了一个循环url("../assets/imgs/tabs/#{nth($tabImageName, $i)}_selected.png")就是url("../assets/imgs/tabs/tab1_selected.png")*/

$tabImageName: 'tab1' 'tab2' 'tab3' 'tab4';
@for $i from 1 to 5 {
  //for ios
  .ion-ios-tab-#{nth($tabImageName, $i)}-outline{
    @extend .ion-tab-icon-base;
    content: url("../assets/imgs/tabs/#{nth($tabImageName, $i)}_normal.png");
  }
  .ion-ios-tab-#{nth($tabImageName, $i)}{
    @extend .ion-tab-icon-base;
    content: url("../assets/imgs/tabs/#{nth($tabImageName, $i)}_selected.png");
  }

  // for android
  .tabs-md .tab-button[aria-selected=false]{
    .ion-md-tab-#{nth($tabImageName, $i)} {
      @extend .ion-tab-icon-md-base;
      content: url("../assets/imgs/tabs/#{nth($tabImageName, $i)}_normal.png");
    }
  }