MUI 设置APP状态栏

状态栏状态类型
默认
变色（设置颜色）
透明（沉浸式）
消失（全屏）

状态栏变色

　　1.效果如图：


　　2.根据色调设置状态栏文字颜色，文字颜色只提供两种值：light（白色）、dark（黑色）
　　3.设置标题栏背景颜色
　　4.设置状态栏背景颜色，颜色值为16进制
　　示例代码：（ios上没有效果，不知道为什么）

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.运用实战（登录界面）

　　需求描述：将背景设置成图片，图片可以适应不同设备的分配率（响应式），将状态栏的背景设置成透明，背景图片覆盖状态栏至屏幕顶部。　　

1. <style>        
2.     html,body{height: 100%;width: 100%;}   
3.     body{   
4.       background:url(image/background.png)no-repeat;    
5.       background-size:100% 100%;                   
6.         filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/background.png',sizingMethod='scale');   
7.     }             
8.     </style> 
9.  
10. 设置页面背景 

1. mui.plusReady(function(){              
2.     plus.navigator.setStatusBarStyle('light');                
3. }); 

1. "plus": { 
2.     "statusbar": { 
3.         "immersed": true 
4.     } 
5. } 

3.沉浸式延伸的问题

　　 由于沉浸式模式是在manifest.json文件配置，作为了一个固定全局的设置，沉浸式的设置可能只是针对部分页面，那么对其他的页面都牵连了。

　　 导致的效果如图：

　　

　　解决代码：

  mui.plusReady(function(){                     
    plus.webview.currentWebview().setStyle({
        statusbar:{background:'#ff0000'},top:0,bottom: 0
　　});
　});
　　background属性，设置状态栏的背景色。测试了下，ios上可以使用。


 全屏显示（没有状态栏）

在应用中可调用5+ API动态改变应用是否全屏显示的状态：

function fullscreen(){
        // 设置应用全屏显示！
        plus.navigator.setFullscreen(true);
}
function unfullscreen(){
        // 设置应用非全屏显示！
        plus.navigator.setFullscreen(false);
}
function isfullscreen(){
        // 查询应用当前是否全屏显示！
        console.log( "是否全屏："+(plus.navigator.isFullscreen()?"是":"否") );
}