Ionic - 筆記 之 Tab

Ionic2 組件之Tab

學了Tabs更少不了Tab組件，Tab組件寫作<ion-tab>,必須要放置在Tabs組件內，是NavController的一種。

基本用法

Tab有以下幾個基本屬性和事件:

Attr	Type	Desc
[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代碼如下:

<ion-tabs #mainTabs (ionChange)="changeTabs()" color="danger" tabsHighlight="true">
    <ion-tab [root]="tab1Root" [rootParams]="homeParams" tabTitle="Home" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" (ionSelect)="selectFriend()" tabTitle="Friends" tabIcon="aperture" tabBadge="3" tabBadgeStyle="danger"></ion-tab>
    <ion-tab [root]="tab3Root" enabled="false"  swipeBackEnabled="true" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</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);
    }
}