在项目中发现AndroidiOS在手机状态栏样式不一样,然后就查到有一个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上都是背景色为黑色,字体为白色

  1. if (cordova.platformId == 'android') {
  2. StatusBar.backgroundColorByHexString("#333");
  3. }else{
  4. $cordovaStatusbar.overlaysWebView(false);
  5. $cordovaStatusbar.style(1);
  6. StatusBar.styleLightContent();
  7. $cordovaStatusbar.styleColor('black');
  8. }

4.最后iOS结果如图:

ionic项目中手机状态栏显示使用$cordovaStatusbar插件的更多相关文章

  1. ionic 项目中使用ngCordova插件$cordovaCamera筛选手机图库图片显示出来并上传

    原文档请看http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic%E5%9B%BE%E7%89%87%E4%B8%8A%E4%B ...

  2. Ionic项目中使用极光推送

    Ionic项目中使用极光推送-android   对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档) ...

  3. Ionic项目中使用极光推送-android

    对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档),使用的是GitHub上的 PushPlugin ...

  4. Ionic项目中如何使用Native Camera

    本文介绍如何在ionic项目中使用设备的camera. Ionic版本:v3.2.0 / 2017-05-10 / MIT Licensed / Release Notes ============= ...

  5. ionic 项目中 使用 sass

    注: 1.先安装node-sass  -->> npm install --save node-sass --registry=https://registry.npm.taobao.or ...

  6. Cordova各个插件使用介绍系列(七)—$cordovaStatusbar手机状态栏显示

    在项目中发现Android和iOS在手机状态栏样式不一样,然后就查到有一个cordova插件可以解决这个问题 1.下载插件$cordovaStatusbar命令: cordova plugin add ...

  7. laravel项目中手机浏览器在线阅读pdf文件-->PDFJS插件

    第一步:下载链接:http://mozilla.github.io/pdf.js/getting_started/#download 第二步:将下载的文件放在项目中. 第三步:在项目中想要预览的地方给 ...

  8. ionic 项目中添加modal的步骤流程

    1.首先在templates文件夹下面定义一个新页面,xxx.html,template文件夹在空项目里面是没有的,需要手动添加一个,放在WWW文件夹下面. <ion-modal-view> ...

  9. 管理项目中的贴图-Texture overview插件

    Texture overview插件管理项目中的贴图 1. Assetstore地址 2. 总览项目中所有贴图 3. 针对不同平台的贴图压缩设置 在插件的右上角 4. 支持多选批量修改 5. 点击表头 ...

随机推荐

  1. 对属性NaN的理解纠正和对Number.isNaN() 、isNaN()方法的辨析

    1.属性NaN的误解纠正 NaN (Not a Number)在w3c 中定义的是非数字的特殊值 ,它的对象是Number ,所以并不是任何非数字类型的值都会等于NaN,只有在算术运算或数据类型转换出 ...

  2. jQuery队列操作

    jQuery.queue 1."fx"是什么? 队列动画的默认名称 队列的名字为type + "queue",默认是"fxqueue" 2. ...

  3. Motor XT615 开机无限卡屏重启的取证与分析

    hello,大家好! 今天我给大家你们带来摩托罗拉 XT615 开机无限卡屏重启的取证与分析, 手机开机后卡屏,一直停留下面这画面,无限重启! 接下来,经过我们工程师的分析,图上报错必定由于机身程序太 ...

  4. 终于搞定office 2013中文双引号无法匹配问题啦!!!

    设计>>字体>>自定义字体>>所有字体改为宋体>>保存>>点击字体确认当前字体是自己刚新建的>>点击旁边设为默认值>> ...

  5. hybird混合式开发搭建

    1.xml <?xml version="1.0" encoding="utf-8"?> <WebView xmlns:android=&qu ...

  6. 使用jQuery解析JSON数据

    我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. 上例中得到的JSON数据如下,是一个嵌套JSON: {"comments&quo ...

  7. 【转】Tomcat版本是32位、64位问题

    转载地址:http://www.cnblogs.com/greensleeves/p/3168541.html 最近遇到一个Tomcat windows安装版本是32位还是64位问题.由于一系列原因, ...

  8. windows重建图标缓存(解决快捷方式图标丢失,图标加载时间长问题)

    新建一个文本文档,把下边的代码输入进去,保存为.bat格式,运行即可 有快捷方式图标丢失或者觉得图标加载速度慢了,就run一下这个,很实用的小工具 rem 关闭Windows外壳程序explorer ...

  9. jQuery 弹出层脚本

    直接贴代码: $.extend({ closeBox: function (o, x, fn) { $('#' + o).fadeOut(500, function () { if (fn & ...

  10. 使用Xmanager远程访问Redhat Enterprise Linux 6.1

    使用Xmanager远程访问Redhat Enterprise Linux 6.1   在Linux服务器开启gdm 配置防火墙 配置selinux 使用xmanager连接linux服务器 在Lin ...