HBuilder设置APP状态栏

匿名 (未验证) 提交于 2019-12-02 21:53:52

一、 前言

  状态栏就是手机屏幕最顶部的区域,包括了:信号、运营商、电量等信息。通常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()?"是":"否") ); }

 


 

 

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!