3

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

我已经看到所有关于标题重叠的帖子，但那些是几年前的，已经在 ion 4 中修复，并且解决方案无论如何都不适用于标签。

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

iOS版本：11.4.1

离子版本：4.0.5

重新创建：

  • 创建 ionic tabs 启动项目
  • 将标签位置更改为顶部

  • 删除 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>

在此处输入图像描述

4

4 回答 4

3

在阅读并使用@Bilow 的答案ion-tabs后，我发现只需为整个元素添加边距就足够了，如下所示：

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

这为 iOS 上的状态栏增加了空间。在已经正常运行的 Android 上，没有任何变化，因此此修复适用于跨平台。

于 2019-08-02T18:48:05.237 回答
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/have-a-hard-time-understanding-the-navigation-with-tabs/92918/9

于 2018-08-12T00:35:38.423 回答
1

只需稍加努力，您就可以继续使用ion-tabs. 这就是我想出的：

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

全局.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

YourPageTemplate.html

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

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

于 2019-04-18T13:34:07.957 回答
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>

我不知道为什么我花了这么长时间才弄清楚...

于 2018-08-13T01:48:51.673 回答