Ion 页脚在 iphone X 中显示一半

Question

我有一个 ionic4 应用程序，其中有一个 .它在 android 和 iPhone 5 到 8+ 上完美运行。但是在 iPhoneX+ 中，我遇到了如下图所示的问题。

我的页脚有以下 html 代码

<ion-footer  *ngIf="text">
  <ion-toolbar mode="ios"> 
    <ion-tabs>
      <ion-tab-bar slot="bottom">

        <ion-tab-button (click)="ngOnInit()">
          <ion-icon name="home"></ion-icon>
          <ion-label>{{ text.home_footer_name }}</ion-label>
        </ion-tab-button>

        <ion-tab-button (click)="nearBy()">
          <ion-icon name="pin"></ion-icon>
          <ion-label>{{ text.home_nearest }}</ion-label>
        </ion-tab-button>

        <ion-tab-button routerLink="/cart" routerDirection="forward">
          <ion-icon name="basket"></ion-icon>
          <ion-label>{{ text.home_cart }}</ion-label>
          <ion-badge *ngIf="count > 0">{{ count }}</ion-badge>
        </ion-tab-button>

        <ion-tab-button routerLink="/profile" routerDirection="forward">
          <ion-icon name="person"></ion-icon>
          <ion-label>{{ text.home_profile }}</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-toolbar>
</ion-footer>

Answer 1

我检查了一下，当单独使用 ion-tabs 而没有其在 ionic 文档中描述的模板选项卡时会出现该问题，但请尝试更改，

<ion-tab-bar slot="bottom">

与：

<ion-tab-bar slot="top">

PD。这只发生在 iOS。如果这能解决问题，请告诉我，对我来说它解决了

Ion 页脚在 iphone X 中显示一半

Ion footer shows half in iphoneX

html

css

ionic4