ion-item 和内容放在 ion-tab 上面

Question

如何将离子标签放在所有显示内容的顶部。



<ion-content>
  /* ion-item*/         
</ion-content>
<ion-tabs>
   /*ion-tab*/
</ion-tabs>

Answer 1

您不应像现在这样在选项卡文件中创建页面。您应该使用您的内容创建一个单独的组件，然后使用您导航到这些组件（视图）的选项卡。这是我为之前创建的应用程序编写的一些代码示例：

<ion-tabs #tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="home-outline"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="tab2" (click)="openModal()">
      <ion-icon name="add-circle-outline"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="tab3" [disabled]="!isAutenticated">
      <ion-icon name="notifications-outline"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

如示例所示，每个 ion-tab-button 都引用特定的选项卡，这些选项卡将包含您的内容。

希望这让您有所了解。

ion-item 和内容放在 ion-tab 上面

ion-item and content is put above ion-tab

ionic-framework

ionic3

ionic4

ionic-native