ionic 3 +ng2 实现app的Tabs功能 图标加文字的样式

1.HTML代码

<ion-tabs #mainTabs>    
  <ion-tab  [root]="tab1Root" tabTitle="首页" tabIcon="index"></ion-tab>
  <ion-tab  [root]="tab2Root" tabTitle="消息" tabIcon="message"></ion-tab>
  <ion-tab  [root]="tab3Root" tabTitle="我的" tabIcon="center"></ion-tab>
</ion-tabs>

   2.ts代码

export class TabsPage {
  @ViewChild('mainTabs') tabRef: Tabs;

  tab1Root = 'IndexPage';
  tab2Root = 'MessagePage';
  tab3Root = 'CenterPage';

  constructor(public event:Events, public backButtonService: BackButtonService, private platform: Platform) {

  }
  ionViewDidEnter() { this.tabRef.select(2); } //这里控制第一次进入的时候对应的模块（2） 这里对应的是CenterPage模块

}

3.scss代码  

.ion-tab-icon-base {   //相同的样式
  width: pxTorem(30px);
  height: 35px !important;
  padding: pxTorem(4px) pxTorem(4px) pxTorem(2px);
}
.tabs-ios .tab-button-icon {
  height: pxTorem(50px);
}
$tabs: 'index', 'message', 'center';
@for $i from 1 through length($tabs) {
  $item: nth($tabs, $i);
  .ion-ios-#{$item} {    //选中的时候
    @extend .ion-tab-icon-base;
    content: url("../assets/image/tabs/#{$item}-select-bar.png");
  }
  .ion-ios-#{$item}-outline {    //outline代表这未选择的时候
    @extend .ion-tab-icon-base;
    content: url("../assets/image/tabs/#{$item}-bar.png");
  }
}
.tabs-ios .tab-button-icon {
  margin-top: 0;
}