Ionic framework 如何在Ionic应用程序的单个视图中切换子视图?
在Ionic framework 如何在Ionic应用程序的单个视图中切换子视图?,ionic-framework,ionic,Ionic Framework,Ionic,在离子视图中,我希望能够在三个区域或子视图之间切换,一次只能看到一个视图。可以将其排序为视图中的“选项卡” ... content above ... +-----------------------+ | Tab 1 | Tab 2 | Tab 3 | +-----------------------+ | | | tab 1 content | +-----------------------+ ... content be
离子视图中
,我希望能够在三个区域或子视图之间切换,一次只能看到一个视图。可以将其排序为视图中的“选项卡”
... content above ...
+-----------------------+
| Tab 1 | Tab 2 | Tab 3 |
+-----------------------+
| |
| tab 1 content |
+-----------------------+
... content below ...
是否可以使用离子标签来执行此操作(或其他机制),或者这需要自定义指令?当然可以
您必须使用选项卡
您可以在
中放置
。
现在,您可以添加
来声明每个选项卡的内容
<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>
家
设置
信息
如果你想看看它是如何工作的,你可以检查这个
您可以阅读本文,了解如何应用不同的样式。这很好。非常感谢。使用类似的设置通过,但没有得到我想要的结果。看起来不错。很高兴我帮了忙。干杯