在项目中发现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. 【转载】调试利器 autoexp.dat

    转载:http://www.cppblog.com/flyinghare/archive/2010/09/27/127836.html autoexp.dat入门(调试时自定义变量显示) VC在调试状 ...

  2. LINUX的磁盘管理du命令详解

    LINUX的磁盘管理du命令详解 du(disk usage)命令可以计算文件或目录所占的磁盘空间.没有指定任何选项时, 它会测量当前工作目录与其所有子目录,分别显示各个目录所占的快数,最后才显示工作 ...

  3. 将形如:Oct 8, 2016 5:29:44 PM串转换成正常时间在真机上遇到的坑

    将形如:Oct 8, 2016 5:29:44 PM串转换成正常时间在真机上遇到的坑 /** * 根据传入字符串 * * @param str 传入的日期字符串 形如:Oct 8, 2016 5:29 ...

  4. [已解决][HTML5]基于WebSocket开发聊天室应用

    WebSocket示例java的比较少,大部分是nodejs的,比较有名的是socket.io的chat, 借用下他的前端实现一套java的,后端基于https://github.com/genera ...

  5. 2 . Linux常见命令

    Linux常见命令格式: 命令名称 选项 参数 ls -alh 文件/目录 --all #ls 显示当前目录内容 #ls -l 显示文件详细信息 #ls -hl h已常见单位显示文件大小 k M G# ...

  6. JSP 实现◆菱形 三角形△ 的输出

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  7. 挑战程序2.1.4 穷竭搜索>>深度优先搜索

      深度优先搜索DFS,从最开始状态出发,遍历一种状态到底,再回溯搜索第二种. 题目:POJ2386  思路:(⊙v⊙)嗯  和例题同理啊,从@开始,搜索到所有可以走到的地方,把那里改为一个值(@或者 ...

  8. Spark学习(二) -- Spark整体框架

    标签(空格分隔): Spark 还记得上次的wordCount程序嘛?通过这个小程序,我们来一窥Spark的框架是什么样子的. sc.textFile("/usr/local/Cellar/ ...

  9. MACS2 安装与使用

    1)下载MACS2 下载网址: https://pypi.python.org/pypi/MACS2 (有下载网址和安装.使用示例)   $ python setup.py install出现如下问题 ...

  10. 如何在自己的窗体(控件)中显示XAF的视图

    Form form = new Form(); DevExpress.ExpressApp.View listView = Application.CreateListView(Application ...