如何在Ionic應用程序中的單個視圖中切換子視圖？

Question

在ion-view內，我希望能夠在三個區域或子視圖之間切換，一次只能看到一個視圖。可以在視圖中將其視爲「標籤」。

... content above ... 
+-----------------------+ 
| Tab 1 | Tab 2 | Tab 3 | 
+-----------------------+ 
|      | 
|  tab 1 content  | 
+-----------------------+ 
    ... content below ... 

是否有可能使用ion-tabs做到這一點（或其他機構），或將這種需要定製指令？

Answer 1

當然可以。

您必須使用標籤directive。

您可以在您的<ion-view>中放置<ion-tabs>。 現在您可以添加<ion-tab>來聲明每個選項卡的內容。

<ion-view view-title="home"> 

    <ion-tabs class="tabs-positive tabs-icon-only tabs-striped tabs-top"> 

     <ion-tab title="Tab1" icon-on="ion-ios-home" icon-off="ion-ios-home-outline"> 
      <ion-nav-view name="tab-1"> 
       <ion-content padding="true" has-header="true"> 
        <h1>HOME</h1> 
       </ion-content> 
      </ion-nav-view> 
     </ion-tab> 

     <ion-tab title="Tab2" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> 
      <ion-nav-view name="tab-2"> 
       <ion-content padding="true" has-header="true"> 
        <h1>SETTINGS</h1> 
       </ion-content> 
      </ion-nav-view> 
     </ion-tab> 

     <ion-tab title="Tab3" icon-on="ion-ios-information" icon-off="ion-ios-information-outline"> 
      <ion-nav-view name="tab-3"> 
       <ion-content padding="true" has-header="true"> 
        <h1>INFO</h1> 
       </ion-content> 
      </ion-nav-view> 
     </ion-tab> 

    </ion-tabs> 

</ion-view> 

如果你想看看它是如何工作的，你可以檢查這個plunker。

你可以閱讀這documentation找出如何應用不同的風格。