一、 前言
状态栏就是手机屏幕最顶部的区域，包括了：信号、运营商、电量等信息。通常APP都有属于自己的色调风格，为了达到整体视觉美观，通常会设置状态栏和标题栏的色调设置成一致。
图例：
二、状态栏状态类型
三、状态栏变色
1.效果如图：
2.根据色调设置状态栏文字颜色，文字颜色只提供两种值：light（白色）、dark（黑色）
3.设置标题栏背景颜色
4.设置状态栏背景颜色，颜色值为16进制
示例代码：
我要评论
1 <link href="css/mui.min.css" rel="stylesheet"/>
2 .mui-bar{ background-color: red;}
3 </link>
4 <script>
5 mui.plusReady(function(){
6 plus.navigator.setStatusBarStyle('light');
7 plus.navigator.setStatusBarBackground('#FF0000');
8 });
9 </script>
注意事项：
背景色终端支持仅：Android5及以上系统支持；iOS7.0及以上系统支持。
文字色终端支持仅：Android5只有小米和魅族支持，Android6及以上所有安卓支持；iOS7及以上支持。
四、状态栏透明（沉浸式）
1.效果如图：
（将背景图片和状态栏、标题栏贯通了）
2.运用实战（登录界面）
需求描述：将背景设置成图片，图片可以适应不同设备的分配率（响应式），将状态栏的背景设置成透明，背景图片覆盖状态栏至屏幕顶部。
<style>
html,body{height: 100%;width: 100%;}
body{
background:url(image/background.png)no-repeat;
background-size:100% 100%;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/background.png',sizingMethod='scale');
}
</style>
mui.plusReady(function(){
plus.navigator.setStatusBarStyle('light');
});
"plus": {
"statusbar": {
"immersed": true
}
}
3.沉浸式延伸的问题
由于沉浸式模式是在manifest.json文件配置，作为了一个固定全局的设置，沉浸式的设置可能只是针对部分页面，那么对其他的页面都牵连了。
导致的效果如图：
（状态栏的高度被忽略）
解决代码：
mui.plusReady(function(){
plus.webview.currentWebview().setStyle({
statusbar:{background:'#ff0000'},top:0,bottom: 0
});
});
background属性，设置状态栏的背景色。
五、 全屏显示（没有状态栏）
在应用中可调用5+ API动态改变应用是否全屏显示的状态：
function fullscreen(){
// 设置应用全屏显示！
plus.navigator.setFullscreen(true);
}
function unfullscreen(){
// 设置应用非全屏显示！
plus.navigator.setFullscreen(false);
}
function isfullscreen(){
// 查询应用当前是否全屏显示！
console.log( "是否全屏："+(plus.navigator.isFullscreen()?"是":"否") );
}
如对本文有疑问， 点击进行留言回复！！
【 Node.js 进阶】你应该知道的 NPM 知识都在这！
人人商城怎么打包生成app？实操方法教程完美实现微信&支付宝支付分享第三方登陆等功能
荐 关于Vue.js的引入方式（页面引入与webpack构建引入）
网友评论