ionic2--tabs笔记

ionic2的主要作用是用来导航的，今天就来撸一撸tabs的常用方法，主要分两组使用方法比较：

1.在根组件中导航（意思就是tabs组件就是你这个项目第一个启动的组件，也就是app.module中，IonicModule.forRoot(MyApp),这里设置的跟组件，这个时候可能有细心的同学发现，在ng2中都是在bootStrap中设置启动组件的，这里怎么不一样，其实不管在哪里，ng2还是ng2，这里的bootStrap确实还是设置了第一个启动的组件，因为在ionic2框架中，所以肯定是先启动IonicApp这个组件的，不然ionic就没法工作了，只是这里说的根组件是对ionic框架来说的）

使用方法：由于navigation 的所有组件都是跟组件的 “子组件”，所以我们不可以直接注入navigation的子组件到根组件中（包括我们需要导航的NavController）组件，NavController实例实际上就是指向ion-tabs组件的实例，所以我们可以通过给ion-tabs组件添加一个引用变量#tabs,然后使用ViewChild获取到tabs组件实例，再使用

select(1)方法来进行页面的选择。

第一步：import { Component,ViewChild } from '@angular/core';

import { Tabs } from 'ionic-angular';

第二步：@ViewChild('Tabs') mytab : Tabs;

ionViewDidEnter(){

let mainTabs = this.tabRef;

mainTabs.select(1);//根据需求动态选中所需的组件

}

2.通过一个普通组件来导航到ion-tabs组件来使用tabs组件（本人建议使用这种方法，结构清晰可见）

对于这种使用方法简简单了：

第一步：引入NavController组件

import { NavController } from 'ionic-angular';

import { TabsPage } from '../tabs/tabs';

第二步：声明私有变量并且告诉ng2当组件实例化的时候要先实例化NavController对象

private navCtrl:NavController,

this.navCtrl.push(TabsPage);//跳转到tabs页面

模板代码如下：
<ion-tabs>
  <ion-tab tabsHideOnSubPages="true" [root]="tab1Root" tabTitle="Racing" tabIcon="home"></ion-tab>
  <ion-tab tabsHideOnSubPages="true" [root]="tab2Root" tabTitle="4D" tabIcon="stats"></ion-tab>
  <ion-tab tabsHideOnSubPages="true" [root]="tab3Root" tabTitle="6D" tabIcon="brush"></ion-tab>
  <ion-tab tabsHideOnSubPages="true" [root]="tab4Root" tabTitle="Poker" tabIcon="nuclear"></ion-tab>
</ion-tabs>
当没有设置的时候第一个就是默认选中的页面，可以通过给ion-tabs设置属性来控制默认选择的组件
<ion-tabs selectedIndex="1">这个样子设置代表默认选中第二个组件
也可以通过给ion-tab设置属性来达到某些效果，常用的属性设置如下：

ionic2 tab常用的属性设置

Attr	Type	Desc
[root]	Page	tab将要加载的组件（也就是页面）
tabTitle	string	tab上显示出来的文字
tabIcon	string	tab上显示的图标，根据icon表填写最有的icon名字
tabBadge	string	tab上显示的角标数字，相当于微信中未读消息的条数那样的效果
tabBadgeStyle	string	角标的颜色
enable	boolean	tab是否可用
show	boolean	是否显示
[rootParams]	object	tab传递的参数
swipeBackEnabled	boolean	是否支持滑动后退
tabsHideOnSubPages	bollean	在子页面是否隐藏
selectedIndex	number	这个是给ion-tabs设置的，设置默认显示那个组件

打完收工，关于ionic2的tabs相关内容也磨叽得差不多了，如果你觉得给你带来了帮助，在下面给我个赞，给我点鼓励，谢谢，如果你是大神，发现有任何错误，欢迎在下面狠狠的批评，谢谢