ionic项目中手机状态栏显示使用$cordovaStatusbar插件
Posted StickToProgram
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ionic项目中手机状态栏显示使用$cordovaStatusbar插件相关的知识,希望对你有一定的参考价值。
在项目中发现Android和iOS在手机状态栏样式不一样,然后就查到有一个cordova插件可以解决这个问题
1.下载插件$cordovaStatusbar命令:
cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
2.在config.xml里面配置如下:
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar"/>
</feature>
将此配置改为:
<preference name="Fullscreen" value="false"/>(否则在android上状态栏显示不出来)
3.在app.js里面,如下:
判断手机是android 还是iOS来定义不同的样式,我的这个是在Android和iOS上都是背景色为黑色,字体为白色
- if (cordova.platformId == ‘android‘) {
- StatusBar.backgroundColorByHexString("#333");
- }else{
- $cordovaStatusbar.overlaysWebView(false);
- $cordovaStatusbar.style(1);
- StatusBar.styleLightContent();
- $cordovaStatusbar.styleColor(‘black‘);
- }
4.最后iOS结果如图:
以上是关于ionic项目中手机状态栏显示使用$cordovaStatusbar插件的主要内容,如果未能解决你的问题,请参考以下文章
如何在启动时更改 phonegap/cordova 状态栏背景(启动画面)?
Ionic/Cordova - 是不是有具有工作轨迹栏功能的媒体/媒体播放器插件?