我们正在构建一个包含三个选项卡的模板。这些选项卡应该像下面这个例子一样工作:https://getbootstrap.com/javascript/#tabs-examples
我们只想在选项卡中切换内容。我们如何在不需要新模板的情况下做到这一点?
我们的detail模板是这样的:
<ion-view view-title="{{item.summary.name}}">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
<div class="bar bar-subheader bar-assertive">
<ion-tabs class="tabs-background-assertive tabs-color-light">
<ion-tab title="Summary">
<ion-nav-view name="summary" ></ion-nav-view>
</ion-tab>
<ion-tab title="Ingridents">
<ion-nav-view name="ingdts"></ion-nav-view>
</ion-tab>
<ion-tab title="Videos">
<ion-nav-view name="video"></ion-nav-view>
</ion-tab>
</ion-tabs>
</div>
</ion-view>
我们试过这个,https://stackoverflow.com/a/31506520/170445,但它不工作
如果我理解正确,您可以将选项卡的ion-content
包装在ion-pane
中以使用静态选项卡:
<ion-tab title="Summary">
<ion-pane>
<ion-content>
<!-- Tab content here -->
Summary content
</ion-content>
</ion-pane>
</ion-tab>
这是一个相互依赖的例子
在你的控制器中有一些类型的对象来控制可见性:
$scope.pageFlow = {
summary: true,
ingts: false,
video: false
}
然后在视图中显示或隐藏div。还可以创建一个作用域方法来处理控件,但不是必需的。需要注意的一点是,离子标签位于离子内容之外,但位于离子视图
内。<ion-view view-title="{{item.summary.name}}">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
<ion-content padding="true" scroll="true" class="has-header">
<div ng-if="pageFlow.summary">
Summary Goes Here
</div>
<div ng-if="pageFlow.ingdts">
Ingredients Goes Here
</div>
<div ng-if="pageFlow.video">
Video Goes Here
</div>
</ion-content>
<ion-tabs class="tabs-background-assertive tabs-color-light">>
<ion-tab title="Summary" on-select="pageFlow.summary = true; pageFlow.video = false; pageFlow.ingdts = false">
</ion-tab>
<ion-tab title="Ingridents" on-select="pageFlow.ingdts = true; pageFlow.video = false; pageFlow.other = false">
</ion-tab>
<ion-tab title="Videos" on-select="pageFlow.video = true; pageFlow.ingdts = false; pageFlow.other = false">
</ion-tab>
</ion-tabs></ion-view>
我还应该注意,您现在只需要一个视图控制器,因为所有内容都在一个内容页内。
我使用的是ionic 5.2.3,我们可以使用离子选项卡,而不需要实际路由,通过删除离子选项卡按钮中的"tabs"属性,并获得哪个选项卡被选中的状态,我使用(点击)事件。
<ion-tabs class="tabs-bottom">
<ion-tab-bar slot="bottom">
<ion-tab-button (click)="event(1)">
<ion-icon name="laptop"></ion-icon>
<ion-label>Label1</ion-label>
</ion-tab-button>
<ion-tab-button (click)="event(2)">
<ion-icon name="cafe"></ion-icon>
<ion-label>Label2</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>