./pages/tabs/tabs.html 里面
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-
circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Settings" tabIcon="cog"></ion-
tab>
</ion-tabs>
./pages/tabs/tabs.ts 里面
import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import {SettingsPage} from '../settings/settings' ;
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage
{
tab1Root = HomePage;
tab2Root = AboutPage;
tab3Root = SettingsPage;
constructor()
{
}
}
像这样将 tabs.html 留空。
<ion-content padding></ion-content>
在 tabs.ts 中试试这个。
import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import {SettingsPage} from '../settings/settings' ;
import { Platform } from 'ionic-angular';
@Component({
template: `
<ion-tabs class="tabs-icon-text" [color]="isAndroid ? 'royal' : 'primary'">
<ion-tab tabIcon="home" tabTitle="Home" [root]="tab1"></ion-tab>
<ion-tab tabIcon="information-circle" tabTitle="About" [root]="tab2"></ion-tab>
<ion-tab tabIcon="cog" tabTitle="Settings" [root]="tab3"></ion-tab>
</ion-tabs>
`})
export class TabsPage {
tab1 = HomePage;
tab2 = AboutPage;
tab3 = SettingsPage;
isAndroid: boolean = false;
constructor(platform: Platform) {
this.isAndroid = platform.is('android');
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句