ionic实现tabs自定义图片

由于在app.module.ts中对ionic的样式强制使用ios,所以此处只对ios版的tabs自定义图片进行考虑。

IonicModule.forRoot(MyApp, {
  backButtonText: '',
  iconMode: 'ios',
  mode: 'ios',
  modalEnter: 'modal-slide-in',
  modalLeave: 'modal-slide-out',
  tabsPlacement: 'bottom',
  pageTransition: 'ios-transition',
  backButtonIcon: 'ios-arrow-back',
  activator: 'highlight'
})

app.scss中增加

//对图标大小进行设置
.ion-tab-icon-base {
  min-width: 20px!important;
  height: 20px!important;
}
//对应在tabs.html中tabIcon
$tabImageName: 'a' 'b' 'c';
@for $i from 1 to 4 {
  //for ios
  .ion-ios-tab-#{nth($tabImageName, $i)} {
    @extend .ion-tab-icon-base;
    content: url("../assets/imgs/tabs_#{nth($tabImageName, $i)}1.png");
  }
  .ion-ios-tab-#{nth($tabImageName, $i)}-outline {
    @extend .ion-tab-icon-base;
    content: url("../assets/imgs/tabs_#{nth($tabImageName, $i)}0.png");
  }
}

tabs.html中修改:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="tab-a"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="通知" tabIcon="tab-b"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="我的" tabIcon="tab-c"></ion-tab>
</ion-tabs>