Ionic 4 - iOS 状态栏与顶部选项卡重叠

Question

我试图在我的应用程序顶部创建一个标签栏，没有明显的 header，但 iOS 状态栏与它重叠。我试过将 ion-tabs 标签包装在具有填充但没有用的 ion-content 标签中。我将选项卡包裹在 header 中，这解决了填充问题，但随后选项卡加载的页面在 header 中消失了。

我看过所有关于 header 重叠的帖子，但那是几年前的事了，它已在 ion 4 中修复，而且这些解决方案无论如何都不适用于制表符。

如何在不删除状态栏的情况下解决这个问题？

iOS版本：11.4.1

离子版本：4.0.5

正在重新创建：

创建离子选项卡入门项目
将选项卡位置更改为顶部

删除home.html

中的header

<ion-tabs tabsPlacement="top">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

Answer 1

标签似乎很难使用。我通过使用细分找到了解决方法。我只需要花一些时间来设计它们以使其看起来正确。

这是我的新 app.html 代码：

<ion-header>
  <h2></h2>
  <ion-segment [(ngModel)]="page" (ionChange)="segmentChanged($event)">
    <ion-segment-button value="home">
      <ion-icon name="home"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="about">
      <ion-icon name="information-circle"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="contacts">
      <ion-icon name="contacts"></ion-icon>
    </ion-segment-button>
  </ion-segment>
</ion-header>
<ion-content>
<ion-nav [root]="rootPage"></ion-nav>
</ion-content>

header 中的段对我有用，但为了获得我需要的填充，我必须添加一个空的 h2 标签。如果有更好的方法，请随时告诉我，目前我对此很满意。

对于那些想做类似事情的人，我在这里找到了答案，由 rapropos 发布：

https://forum.ionicframework.com/t/having-a-hard-time-understanding-the-navigation-with-tabs/92918/9

Answer 2

更好的解决方案显而易见：

<ion-header>
  <h2></h2>
</ion-header>

<ion-content>
  <ion-tabs tabsPlacement="top">
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
  </ion-tabs>
</ion-content>

我不确定为什么我花了这么长时间才弄明白...

Answer 3

只要再努力一点，您就可以继续使用 ion-tabs。这就是我想出的：

添加到您的全局 scss（或任何需要的地方）

global.scss

.plt-ios {
  ion-tab-bar {
    padding-top: var(--ion-safe-area-top);
  }

  ion-header ion-toolbar.noSafeAreaPaddingTop{
    padding-top: 0 !important;
  }
}

使用ion-toolbar

noSafeAreaPaddingTop

YourPageTemplate.html

<ion-header>
  <ion-toolbar class='noSafeAreaPaddingTop'>
    <ion-title>Tab page title</ion-title>
  </ion-toolbar>
</ion-header>
...

我对这种方法也不太满意，但它适用于 ion-tabs..

Answer 4

在阅读和使用之后，我发现只需将边距添加到整个 ion-tabs 元素就足够了，如下所示：

ion-tabs {
  margin-top: var(--ion-safe-area-top);
}

这为 iOS 上的状态栏添加了 space。在 Android 上，它已经正常运行，没有任何变化，因此此修复可跨平台运行。

Ionic 4 - iOS 状态栏与顶部选项卡重叠

Ionic 4 - iOS status bar overlaps top tabs

tabs

ios

ionic-framework

ionic4