ios上打破了离子离子头棒的风格

Question

我使用离子框架在iOS和Android上构建应用程序。 问题是通常在Android上实现的ion-header-bar样式在iOS上被严重破坏。 以下是手机的屏幕截图。

{left：ios，right：android}

以下是Safari中调试的主页。

蓝色阴影区域是标题栏区域。

我想知道是否有必须单独为ios指定的选项。或覆盖样式。

Answer 1

我通过覆盖sass文件解决了我的问题。 添加到ionic.app.sass文件的样式代码如下所示。

.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader)
  height: 84px
  .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper
    margin-top: 19px !important
  .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > *
    margin-top: 20px

.platform-ios.platform-cordova:not(.fullscreen) .has-header,
.platform-ios.platform-cordova:not(.fullscreen) .bar-subheader
  top: 84px

感谢。

Answer 2

我认为您必须使用<ion-header>而不是<ion-header-bar>。还要在html文件中关闭相同的标记。

在我的项目中，<ion-header>可以正常使用。

建议写标签： -

当你打算在那个时候写一个标签<ion-header>时，框架可能不会给你这个标签的建议。然后你也可以用给定的标签写和尝试。

Hopy它会对你有用。