MUI 设置APP状态栏

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


状态栏变色

  1.效果如图:
MUI 设置APP状态栏

  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.效果如图:


MUI 设置APP状态栏
  

  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.     } 

3.沉浸式延伸的问题

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

   导致的效果如图:

  MUI 设置APP状态栏

  解决代码:

  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()?"是":"否") );
}
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值