HBuilder设置APP状态栏

2018-06-24 01:58:49来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一、 前言

  状态栏就是手机屏幕最顶部的区域,包括了:信号、运营商、电量等信息。通常APP都有属于自己的色调风格,为了达到整体视觉美观,通常会设置状态栏和标题栏的色调设置成一致。

  图例:

  

 


 

 

二、状态栏状态类型

  1. 默认
  2. 变色(设置颜色)
  3. 透明(沉浸式)
  4. 消失(全屏)

 


 

 

三、状态栏变色

  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>    
View Code

  注意事项:

  背景色终端支持仅: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
    }
}
打开应用的manifest.json文件,切换到代码视图,在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()?"是":"否") );
}

 


 

 

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JS贪吃蛇小游戏

下一篇:父组件中vuex方法更新state,子组件不能及时更新并渲染的解决方