一般app開發(fā)都是選擇的tabs來做基本架構(gòu)航邢，也就是首頁都是有幾個tab選項卡組成的赖临。本文要說的嵌套tab是指在tabs的架構(gòu)基礎上，在到具體某個頁面上還要使用到tab或類tab的樣式。
分兩種情況卒稳，一種是在首頁嵌套tabs，一種是在二級頁面嵌套tabs他巨。

首頁嵌套tabs

首頁嵌套tab充坑，是指在屬于整個架構(gòu)的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

二級頁面是指從首頁跳轉(zhuǎn)進去的后面的頁面，并且二級頁面隱藏了整個架構(gòu)的tabs份企。相對首頁來說也榄，二級頁面再嵌套tabs就比較麻煩一些。
如果在二級頁面直接使用ionic封裝好的<ion-tabs>標簽司志，頁面可以正常顯示甜紫，但是頁面的跳轉(zhuǎn)頁發(fā)生錯亂。
這個時候想到的解決辦法就是使用<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里面的內(nèi)容被tabs擋住贸营。
• 如果不使用<ion-tabs>標簽吨述，是不能使用$ionicTabsDelegate來控制嵌套tabs的，相應的事件處理是加在a標簽的ng-click上钞脂。

總結(jié)

除了上面已經(jīng)講到的兩種簡單易用的方法之外揣云，還有很多方法可以實現(xiàn)。比如使用其他封裝好的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;
    }