1.在theme文件夹下新建icons.scss文件,直接贴代码
.ion-tab-icon-base {
width: 32px;
height: 32px;
padding: 4px 4px 2px;
}
.ion-tab-icon-md-base {
min-width: 0 !important;
height: 32px;
}
$tabImageName: 'home''contact''message''mine';
@for $i from 1 to 5 {
//for ios
.ion-ios-tab-#{nth($tabImageName, $i)} {
@extend .ion-tab-icon-base;
content: url("../assets/imgs/tabs/#{nth($tabImageName, $i)}.svg");
}
.ion-ios-tab-#{nth($tabImageName, $i)}-outline {
@extend .ion-tab-icon-base;
content: url("../assets/imgs/tabs/#{nth($tabImageName, $i)}_off.svg");
}
// for android
.tabs-md .tab-button[aria-selected=true] {
.ion-md-tab-#{nth($tabImageName, $i)} {
@extend .ion-tab-icon-md-base;
content: url("../assets/imgs/tabs/#{nth($tabImageName, $i)}.png");
}
}
.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)}_off.png");
}
}
}
2.在app文件夹下新建tab是文件夹,里面需要包含四个文件tabs.html,tabs.scss,tabs.ts,tabs.module.ts
3.tabs.html
<ion-tabs #mainTabs>
<ion-tab [root]="OAHomeRoot" tabTitle="首页" tabIcon="tab-home" [rootParams]="Sign" tabsHideOnSubPages></ion-tab>
<ion-tab [root]="OAContactRoot" tabTitle="通讯录" tabIcon="tab-contact" [rootParams]="Sign" tabsHideOnSubPages></ion-tab>
<ion-tab (ionSelect)="clearUnread()" [root]="OAMesssageRoot" tabTitle="消息" tabIcon="tab-message" [rootParams]="Sign" [tabBadge]="messageConut" tabBadgeStyle="danger" tabsHideOnSubPages></ion-tab>
<ion-tab [root]="OAMineRoot" tabTitle="我的" tabIcon="tab-mine" [rootParams]="Sign" tabsHideOnSubPages></ion-tab>
</ion-tabs>
4.tabs.scss
page-tabs {
.tabbar {
box-shadow: 0px 0px 2px 1px #E5E5E5 !important;
border: 0px !important;
}
}
5.tabs.ts
import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Tabs } from "ionic-angular";
import { userHomePage } from '../../pages/user-home/user-home-page/user-home-page';
import { mineHomePage } from '../../pages/mine-home/mine-home-page/mine-home-page';
import { userContactPage } from '../../pages/user-home/user-contact-page/user-contact-page';
import { messageManagePage } from '../../pages/work-home/message-manage-page/message-manage-page';
@Component({
selector: "page-tabs",
templateUrl: 'tabs.html'
})
export class TabsPage {
@ViewChild('mainTabs') tabs: Tabs;
OAHomeRoot: any = userHomePage;
OAContactRoot: any = userContactPage;
OAMesssageRoot: any = messageManagePage;
OAMineRoot: any = mineHomePage;
constructor(public navCtrl: NavController) {
}
}
6.tabs.module.ts
import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { TabsPage } from "./tabs";
@NgModule({
imports: [IonicModule],
declarations: [TabsPage],
entryComponents: [TabsPage],
providers: [],
exports: [IonicModule]
})
export class TabsModule {
}
7.将TabsModule注入到app.module.ts,
app.module.ts如下
import { TabsModule } from './tabs/tabs.module';
@NgModule({
imports: [
TabsModule,//tab组件
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
],
})
export class AppModule { }
