ionic3之tabs用法详解,你知道的和不知道的都在这儿

Tabs（选项卡） ion-tabs 在一个 app 中，Tabs 使得在不同页面和功能之间导航更加容易。Tabs 组件，以 的方式写，是单个 Tab 组件的容器。每个 对于 NavControll 来说是公开的组件。 那么tabs有哪些属性和事件呢？下面详细介绍一下:

属性和事件详解

标签	类型	作用
[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
  // 为tab标签指定导航至的页面
  tab1Root: any = HomePage;
  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() {
    let modal = this.modalCtrl.create(ContactPage); // 声明一个modal
    modal.present(); // 弹出modal
  }

  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);
    }
}