Ionic学习日记3：android底部导航栏

新建一个页面用于放置tabs

首先打开命令提示符进入到项目中，然后输入

ionic g page TabsPage

这个将用于放置底部导航栏

修改tabs.html

我是删掉该文件中所有的内容，然后输入（因具体项目而定，可以不用和我一样效果）

TabsPage效果图

<ion-tabs>
  <ion-tab tabIcon="aperture" tabTitle="一瞬" [root]="tab1Root" [rootParams]="userInfo"></ion-tab>
  <ion-tab tabIcon="md-bus" tabTitle="旅行" [root]="tab2Root" [rootParams]="userInfo"></ion-tab>
  <ion-tab tabIcon="md-images" tabTitle="分享" [root]="tab3Root" [rootParams]="userInfo"></ion-tab>
  <ion-tab tabIcon="md-person" tabTitle="我的" [root]="tab4Root" [rootParams]="userInfo"></ion-tab>
</ion-tabs>

tabIcon是图标的样式，tabTitle是各个标签的文字，默认是图标在上，文字在下，[root]是给各个标签的"name"，[rootParams]是用来接收参数用（暂时没怎么仔细了解，目前就是用它来接受其他页面传来的参数，可不写）

从其他页面跳转到tabs当中

这次我们回到HomePage部分操作，给button附上点击事件(click)，在home.ts文件中给函数添加

 this.navCtrl.setRoot(TabsPage);

或者

 this.navCtrl.push(TabsPage);

给各个tab附上页面

我这边做了4个tab，所以需要额外新增4个页面，这里不做细说，自行操作。

回到tab.ts tab.ts
添加以下代码：

  tab1Root = OnsecondPage;
  tab2Root = TravelPage;
  tab3Root = ListPage;
  tab4Root = PersonPage;

OnsecondPage等等都是我自己新增的页面，每个页面都可以做其他事情，这样就是完成了android底部导航栏的效果了，当然，千万别忘了在app.module.ts当中添加TabsPage和后来新增的页面进去
PS：实现跳转到TabsPage的某一个特定的界面，比如最上面的效果图，当从LoginPage跳转到TabsPage的时候，默认是跳转到“一瞬”这个tab的，如果要默认跳转到其他的tab，则需要添加selectedIndex="？"，问号是tab的位置，例如：

<ion-tabs selectedIndex="2">
  <ion-tab tabIcon="aperture" tabTitle="一瞬" [root]="tab1Root" [rootParams]="userInfo"></ion-tab>
  <ion-tab tabIcon="md-bus" tabTitle="旅行" [root]="tab2Root" [rootParams]="userInfo"></ion-tab>
  <ion-tab tabIcon="md-images" tabTitle="分享" [root]="tab3Root" [rootParams]="userInfo"></ion-tab>
  <ion-tab tabIcon="md-person" tabTitle="我的" [root]="tab4Root" [rootParams]="userInfo"></ion-tab>
</ion-tabs>

当我将数值改为2的时候，就表示从LoginPage跳转到TabsPage时，是直接跳转到“分享”这个tab

后言

初学ionic，发现这里面还是有很多的和原生android开发不一样的地方，像这次的tab，也是慢慢摸索了许久，和小组的其他成员一起摸索出来的，希望大家也能把自己的经验一起分享分享