Angularjs 如何在没有新模板的情况下在Ionic选项卡中呈现内容,但只需像引导中那样切换选项卡即可
我们正在构建一个包含三个选项卡的模板。这些选项卡的工作方式应与本例中的相同: 我们只想切换选项卡中的内容。在不需要新模板的情况下,我们如何做到这一点 我们的详细信息模板如下所示:Angularjs 如何在没有新模板的情况下在Ionic选项卡中呈现内容,但只需像引导中那样切换选项卡即可,angularjs,ionic-framework,angular-ui-router,Angularjs,Ionic Framework,Angular Ui Router,我们正在构建一个包含三个选项卡的模板。这些选项卡的工作方式应与本例中的相同: 我们只想切换选项卡中的内容。在不需要新模板的情况下,我们如何做到这一点 我们的详细信息模板如下所示: <ion-view view-title="{{item.summary.name}}"> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" men
<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>
我们尝试了此操作,但不起作用。在您的控制器中,有某种类型的对象来控制可见性:
$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>
这里是总结
配料在这里
这里有视频
>
我还应该注意,现在视图只需要一个控制器,因为所有内容都在一个内容页内。如果我理解正确,您可以将选项卡的
离子内容
包装在离子窗格
中,以使用静态选项卡:
<ion-tab title="Summary">
<ion-pane>
<ion-content>
<!-- Tab content here -->
Summary content
</ion-content>
</ion-pane>
</ion-tab>
摘要内容
这里有一个我使用的是ionic 5.2.3,我们可以通过删除ion tab按钮中的“tabs”属性来使用ion tabs,而无需实际路由,为了获得选中选项卡的状态,我使用了(单击)事件
标签1
标签2
我们刚刚检查过。但在ng select上什么也没发生,我们在控制器上做了一个函数并添加了警报,控制台中并没有输出,也并没有错误。。。在我的第一篇文章之后,我确实更改了离子标签部分。你能确保看到更新的版本吗。我在回答中复制了一个错误的代码块。在我从您的选项卡中删除ion nav视图后,您是否尝试过该示例?我唯一能想到的另一件事是,当我在select上发表评论时,你在之前的评论中说了ng select。我想这不会有什么不同,但我还没有测试过。是的,我们可能在你更新它之前就尝试过了。但我们将使用@Und3rTow解决方案作为其直接解决方案。感谢您的帮助和时间。这不太好,因为它将始终根据当前路线呈现内容,如果缺少[tab]属性,则默认为“/”,即根页面。
<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>