ionic3之tabs用法详解

https://blog.csdn.net/qq_36171431/article/details/79192530

 

个人分类： ionic3

[root]	Page	指定tab希望加载的页面
tabTitle	string	tab上显示的标题
tabIcon	string	tab上显示的图标
tabBadge	string	tab上显示的角标数字
tabBadgeStyle	string	角标数字的颜色
enabled	boolean	tab是否可用，默认为true
show	boolean	tab是否显示
[rootParams]	object	tab上传递的参数
tabUrlPath	string	点击tab时跳转的页面url
swipeBackEnabled	boolean	是否支持滑动后退
tabsHideOnSubPages	boolean	在子页面是否隐藏
(ionSelect)	方法	tab select 方法

属性和事件详解

示例html代码如下:

1. <ion-tabs #mainTabs (ionChange)="changeTabs()" color="danger" tabsHighlight="true">

2. <ion-tab [root]="tab1Root" [rootParams]="homeParams" tabTitle="Home" tabIcon="home"></ion-tab>

3. <ion-tab [root]="tab2Root" (ionSelect)="selectFriend()" tabTitle="Friends" tabIcon="aperture" tabBadge="3" tabBadgeStyle="danger"></ion-tab>

4. <ion-tab [root]="tab3Root" enabled="false" swipeBackEnabled="true" tabTitle="Contact" tabIcon="contacts"></ion-tab>

5. </ion-tabs>

 

示例typeScript脚本代码如下：

 

import { Component,ViewChild } from '@angular/core'; import { HomePage } from '../home/home'; import { AboutPage } from '../about/about'; import { ContactPage } from '../contact/contact'; import { Tabs,ModalController } from 'ionic-angular'; @Component({ templateUrl: 'tabs.html' }) export class TabsPage { @ViewChild('mainTabs') tabRef:Tabs; // this tells the tabs component which Pages // should be each tab's root Page tab1Root: any = HomePage;//为tab标签指定导航至的页面 tab2Root: any = AboutPage; tab3Root: any = ContactPage; // 指定参数,在tab指向的页面可以读取到该参数 homeParams:any = { user1:"admin", user2:"ionic" }; constructor(public modalCtrl: ModalController) { } changeTabs = function(){ console.log("tab changed"); }; // 选中tab页后的事件 selectFriend(){ // 声明一个modal let modal = this.modalCtrl.create(ContactPage); // 弹出modal modal.present(); } ionViewDidEnter(){ let mainTabs = this.tabRef; mainTabs.select(1); } }

 

home页使用参数示例代码如下：

 

import { Component } from '@angular/core';
// 引入NavParams
import { NavController,NavParams } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    // 在这里指定navParams
    constructor(public navCtrl: NavController,public navParams:NavParams) {
    }
    ionViewWillEnter(){
        // 使用this.navParams.data可以读取tab页传过来的参数
        console.log("NavParams:"+this.navParams.data.user1);
        console.log("NavParams:"+this.navParams.data.user2);
    }
}