html - 我们如何在 ionic 2 应用程序中显示多个选项卡？

Question

大家好，我是 ionic 2 的新手，我们如何在我的应用程序中使用多个选项卡，

• 我的 plunker 供引用:- My Plunker , 是否有可能使用多个选项卡？
• 在 plunker tabs-page 中我们使用了两个 ion-tabs 但只有一个标签显示，另一个标签不可见。
• 我们真正想要的是，我们只需要使用多个标签，并且多个标签需要在页面中可见...
• 我们不知道我们在哪里犯了错误以及它是如何工作的，是否有可能在一个应用程序中使用多个标签...

我的 ion-tabs 代码:-

<ion-tabs>
   <ion-tab tabIcon="apps" [root]="tab3Root"></ion-tab>
</ion-tabs>

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="pulse"></ion-tab>
</ion-tabs>

• 以上两个标签需要可见

在 plunker 中，下面的 ion-tab 不显示:-

<ion-tabs>
    <ion-tab tabIcon="apps" [root]="tab3Root"></ion-tab>
</ion-tabs>

• 如果有人知道解决方案，请帮助我们，并更新 plunker 以了解确切的解决方案，谢谢...

Answer 1

可以通过使用 CSS 并使 可见 来完成。按照下面的代码和plunker link

HTML

<ion-tabs tabs-only>
 <ion-tab tabIcon="apps" [root]="tab3Root"></ion-tab>
</ion-tabs>

<ion-tabs tabs-only2 >
 <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
 <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="pulse"></ion-tab>
</ion-tabs>

CSS

ion-tabs[tabs-only] .tabbar {
    position: fixed;
    bottom: 0;
    height: auto;
    visibility: visible;
    opacity: 1;
    z-index: 111;
    height: 85px;
}

ion-tabs[tabs-only] {
    margin-bottom: 20px;
    contain: none;
    top: 85%;
}