如何在 Ionic 应用程序的单个视图中的子视图之间切换？

Question

在 ion-view 中，我希望能够在三个区域或子视图之间切换，一次只显示一个视图。可以在视图中将其视为 "tabs"。

  ... 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 了解如何应用不同的样式。

如何在 Ionic 应用程序的单个视图中的子视图之间切换？

How to switch between subviews in a single view in an Ionic app?

ionic-framework

ionic