ionic项目中手机状态栏显示使用$cordovaStatusbar插件
来源:互联网 发布:2016淘宝最新规则 编辑:程序博客网 时间:2024/06/04 20:06
在项目中发现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结果如图:
具体请参考ngcordova官网,http://ngcordova.com/docs/plugins/statusbar/和https://github.com/apache/cordova-plugin-statusbar上的资料
0 0
- ionic项目中手机状态栏显示使用$cordovaStatusbar插件
- ionic项目中手机状态栏显示使用$cordovaStatusbar插件
- ionic 项目中使用ngCordova插件$cordovaCamera筛选手机图库图片显示出来并上传
- ionic项目中使用cordova插件支付宝支付
- uwp开发中手机状态栏显示
- eclipse插件项目中添加状态栏信息
- Ionic项目中使用极光推送-android
- Ionic项目中使用极光推送-android
- Ionic项目中使用极光推送
- Ionic项目中使用极光推送-android
- ionic $ionicActionSheet 手机显示不正常
- ionic 显示手机本地图片
- ionic 全屏显示,隐藏状态栏StatusBar
- ionic 使用ngcordova插件
- IONIC插件的使用
- BCG中使用状态栏显示状态信息
- ionic项目之ngcordova插件
- ionic项目之ngcordova插件
- 百度面试题
- 二维数组转一维数组
- oracle体系结构详解
- MySQL索引和查询优化的实际操作
- 程序员必须知道的7大基础实用算法及其讲解
- ionic项目中手机状态栏显示使用$cordovaStatusbar插件
- Mysql数据库索引查询优化的分享
- 如何用消息系统避免分布式事务
- CCDirectot
- @OneToMany与@ManyToOne
- OpenCV 3 SURF 特征提取
- fwrite写unicode回车遇到乱码
- Activity的跳转
- [慢查优化]联表查询注意谁是驱动表 & 你搞不清楚谁join谁更好时请放手让mysql自行判定