HBuilder设置APP状态栏

一、前言

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

　　图例：

二、状态栏状态类型

默认
变色（设置颜色）
透明（沉浸式）
消失（全屏）

三、状态栏变色

　　1.效果如图：

　　2.根据色调设置状态栏文字颜色，文字颜色只提供两种值：light（白色）、dark（黑色）

　　3.设置标题栏背景颜色

　　4.设置状态栏背景颜色，颜色值为16进制

　　示例代码：

 <link href="css/mui.min.css" rel="stylesheet"/>

 .mui-bar{ background-color: red;}

 </link>

 <script>

 mui.plusReady(function(){

 plus.navigator.setStatusBarStyle('light');

 plus.navigator.setStatusBarBackground('#FF0000');

 });

 </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

    }

}

打开应用的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()?"是":"否") );

}

巴特西

HBuilder设置APP状态栏

最新文章

热门文章