logo标签列表

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

iosionic-frameworktabsionic4
3
我正在尝试在我的应用程序顶部创建一个选项卡栏，没有明显的标题，但是iOS状态栏会重叠在它上面。我尝试将ion-tabs标签包装在具有填充的ion-content标记中，但那并没有起作用。我将选项卡包装在标题中，解决了填充问题，但选项卡加载的页面消失在标题内。
我看到了所有关于重叠标题的帖子，但那些都是几年前的事情，在ion 4中已经修复，并且那些解决方案对于选项卡也不起作用。
如何在不删除状态栏的情况下解决这个问题？
iOS版本：11.4.1
ionic版本：4.0.5
重现：
  • Create the ionic tabs starter project
  • Change the tabs placement to top

  • Remove the header in home.html

    <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>

enter image description here

5个回答
3

阅读并尝试了 @Bilow的回答 后，我发现只需将边距添加到整个ion-tabs元素即可：

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

这增加了iOS状态栏的空间。在Android上，已经正常工作，所以此修复方法是跨平台的。

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>

在头部使用分段对我有用，但为了获得所需的填充，我不得不添加一个空的h2标签。如果有更好的方法，请随时告诉我，目前我很满意这个结果。

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

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

更新为正确答案，因为制表符很糟糕，没有人应该使用它们。 - randyrocketship
1

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

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

global.scss

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

  ion-header ion-toolbar.noSafeAreaPaddingTop{
    padding-top: 0 !important;
  }
}
  1. 在使用ion-toolbar的每个选项卡页面中添加'noSafeAreaPaddingTop'类

YourPageTemplate.html

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

我对这种方法也不是很满意，但它可以与 ion-tabs 一起使用。

0
一个更好的解决方案是显而易见的：
<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>

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

选项卡是一种非常不灵活的噩梦。除非有人能够说服我使用它们，否则我会切换回分段。 - randyrocketship
0

这个答案可能是最简单和最干净的。

您只需要让IonHeader通过在其中放置一个Non-Breaking-Space来处理顶部边距。

<ion-header>&nbsp;</ion-header>

<ion-content>
  <!-- Anything you want -->
</ion-content>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接