ionic1开发之嵌套tabs

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

---

首页嵌套tabs

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

  
    xxx
  
  
    
    
    
  

二级页面嵌套tabs

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

替代，用a标签代替即可。

  
    xxx
  
  

    tab1
    tab2
  

注意事项

• 嵌套的tabs必须放在标签外面，标签里面，不管是直接使用标签还是使用
  。

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

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

---

总结

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

1. 使用封装好的；

2. 使用

   ；

3. 使用

   ，此时;

4. 如果觉得封装好的样式或者标签无法达到实际需求的效果，那么就完全可以考虑自己写样式出来。
   HTML代码：
   
   
   xxx
   
   

   
   tab1
   tab2
   
   
   

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