隐藏状态栏时的 Ionic bar-header padding-top

Question

我在使用 ionic-framework 的 bar-header 组件时遇到问题。我总是有几个像素的填充顶部（见截图）。我正在使用 cordova 插件 org.apache.cordova.statusbar 来隐藏状态栏，如下所示：

  if(window.StatusBar) {
    StatusBar.hide();  
    StatusBar.overlaysWebView(false);
  }

任何帮助将不胜感激。

Answer 1

如果您正确安装了插件，只需调用

ionic.Platform.fullScreen();

隐藏状态栏之后。

这可能会删除应用顶部的 space。

Answer 2

在您的 main.css 中覆盖这些离子 css 规则。这解决了我的问题：

.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper {
    margin-top: 0px !important;
}
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
    margin-top: 0px; 
}

隐藏状态栏时的 Ionic bar-header padding-top

Ionic bar-header padding-top when status bar is hidden

statusbar

ios

cordova

ionic-framework

ionic