Как избежать того, чтобы ионный заголовок не заходил за панель состояния ios?
Заголовок появляется из этого кода:
<ion-view title="{{title}}" hide-nav-bar="false">
Как избежать того, чтобы ионный заголовок не заходил за панель состояния ios?
Заголовок появляется из этого кода:
<ion-view title="{{title}}" hide-nav-bar="false">
Наконец, проблема решена.
в app.js
$ionicPlatform.ready(function() {
if (window.cordova && $cordovaKeyboard) {
$cordovaKeyboard.hideAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
}
и, если это еще не решает проблему. В index.html, cordova.js должен быть импортирован в последний раз.
<head>
...
<script src="cordova.js"></script>
</head>
Это решает мою проблему.
От: http://www.sitepoint.com/5-ionic-app-development-tips-tricks/
Ionic имеет специфические классы для решения этой проблемы - платформы-ios и платформы-кордовы. Предварительно созданные элементы Ionics нацеливают эти классы и добавляют верхнюю границу 20px к кнопкам в вашем заголовке, чтобы компенсировать эти ситуации. Чтобы мои собственные пользовательские элементы делали то же самое, я придерживаюсь одного и того же шаблона. Для моего .search-bar выше я добавляю маржу, если у нас есть класс body.platform-ios.platform-cordova: not (.fullscreen). Пример:
.platform-ios.platform-cordova:not(.fullscreen) .search-bar {
margin-top: 20px;
}
Это должен быть правильный ответ.
Решение с StatusBar.styleDefault();
не работает для меня, но вызов StatusBar.overlaysWebView(false)
выполнил задание.
Первый снимок экрана - это пользовательский интерфейс приложения перед вызовом StatusBar.overlaysWebView(false)
, вы можете видеть, что строка состояния iOS находится над приложением, и пользователь не может щелкнуть по всей области кнопки меню:
Теперь, когда я вызываю StatusBar.overlaysWebView(false)
, строка состояния iOS больше не находится над кнопкой меню:
Я давно застрял в одной и той же проблеме, и ни один из вышеперечисленных решений не работал у меня. И, наконец, чтобы строка состояния перекрывалась в представлении приложения, я добавил следующий preference
в мой config.xml
файл и альт:
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
Для этого требуется плагин: cordova-plugin-statusbar "StatusBar"
.
Надеюсь, что это поможет.
Этот код работает для меня с ионным 3 (3.7.1)
Откройте App.scss
в папке app
, затем добавьте этот код:
.platform-ios
{
page-home { // replaced by your page HERE
top: 20px !important;
}
}