ionic1开发之嵌套tabs

一般app开发都是选择的tabs来做基本架构，也就是首页都是有几个tab选项卡组成的。本文要说的嵌套tab是指在tabs的架构基础上，在到具体某个页面上还要使用到tab或类tab的样式。
分两种情况，一种是在首页嵌套tabs，一种是在二级页面嵌套tabs。

---

首页嵌套tabs

首页嵌套tab，是指在属于整个架构的tab的那个页面上再使用tab的样式。这种情况很好处理，可以直接引用ionic封装好的<ion-tabs>标签和相应样式即可。

<ion-view view-title="title">
  <ion-content class="has-tabs-top">
    xxx
  </ion-content>
  <ion-tabs class="tabs-striped tabs-top">
    <ion-tab on-select="tabSelected()" title="tab1"></ion-tab>
    <ion-tab on-select="tabSelected()" title="tab2"></ion-tab>
    <ion-tab on-select="tabSelected()" title="tab3"></ion-tab>
  </ion-tabs>
</ion-view>

二级页面嵌套tabs

二级页面是指从首页跳转进去的后面的页面，并且二级页面隐藏了整个架构的tabs。相对首页来说，二级页面再嵌套tabs就比较麻烦一些。
如果在二级页面直接使用ionic封装好的<ion-tabs>标签，页面可以正常显示，但是页面的跳转页发生错乱。
这个时候想到的解决办法就是使用<div>替代<ion-tabs>，用a标签代替<ion-tab>即可。

<ion-view view-title="title">
  <ion-content class="has-tabs-top">
    xxx
  </ion-content>
  <div class="tabs tabs-top tabs-striped">
    <a class="tab-item tab-item-active" ng-click="tabSelected()">tab1</a>
    <a class="tab-item" ng-click="tabSelected()">tab2</a>
  </div>
</ion-view>

注意事项

• 嵌套的tabs必须放在<ion-conten>标签外面，<ion-view>标签里面，不管是直接使用<ion-tabs>标签还是使用<div class="tabs tabs-top tabs-striped">。

Note: do not place ion-tabs inside of an ion-content element; it has been known to cause a certain CSS bug. --详情请参看文档--

• 记得为<ion-content>标签添加class="has-tabs-top"样式，不然会导致content里面的内容被tabs挡住。
• 如果不使用<ion-tabs>标签，是不能使用$ionicTabsDelegate来控制嵌套tabs的，相应的事件处理是加在a标签的ng-click上。

---

总结

除了上面已经讲到的两种简单易用的方法之外，还有很多方法可以实现。比如使用其他封装好的class来替换tabs样式，或者更直接的完全可以自己写样式。

1. 使用封装好的<ion-tabs><ion-tab>；

2. 使用<div class="tabs"><a class="tab-item">；

3. 使用<div class="bar bar-subheader"><a class="tab-item">，此时<ion-conten class="has-subheader">;

4. 如果觉得封装好的样式或者标签无法达到实际需求的效果，那么就完全可以考虑自己写样式出来。
   HTML代码：
   <ion-view view-title="title">
   <ion-content>
   xxx
   </ion-content>
   <div class="imc-tabs">
   <a class="imc-tab-item selected" ng-click="tabSelected()">tab1</a>
   <a class="imc-tab-item" ng-click="tabSelected()">tab2</a>
   </div>
   </ion-view>

    CSS代码:
    .imc-tabs {
      display: flex; 
      position: absolute; 
      top: 44px;
      height: 44px;
      width: 100%;
    }
    .imc-tab-item {
      flex: 1;
      text-align: center;
      height: 44px;
      line-height: 44px;
      border-left: 1px solid white;
      border-right: 1px solid white;
      border-bottom: 1px solid #f8f8f8;
    }
    .imc-tab-item.selected {
      border-bottom: 1px solid white;
      border-left: 1px solid #f8f8f8;
      border-right: 1px solid #f8f8f8;
    }
   
    // 处理iOS显示相对android上移了20px的问题
    // [详情参看文档] (http://ionicframework.com/docs/platform-customization/)
    .platform-ios.platform-cordova .imc-sub-header { 
      top: 64px;
    }