H5plus沉浸式状态栏

状态栏：手机的顶部状态栏，也就是信号、电量那条，有4种状态，分别是正常、变色、透明（也称沉浸式状态栏）、消失（也就是全屏）。

• 说明：IOS&Android统一风格白底黑字（按实际需求）。

---

个人理解：沉浸式状态栏开启后会跟header颜色一致，header需要增加系统状态栏高度，原header内容需要增加一个padding-top，值为系统状态栏高度；避免遮挡住系统状态栏；

注意：HBuilder的header&footer都是固定定位，导致content会从顶部开始排布，需要设置content距离顶部的距离，值为新的header的高度；

---

一、首页配置

1、在manifest.json文件中，plus->launchwebview下添加statusbar

"statusbar": {

    "immersed": "true", //开启沉浸式

    "style": "dark" //文字前景色为黑色（仅支持light/dark）

}

2、js代码

/**
* 获取系统状态栏高度
*/
export function statusbarHeight() {
 let isImmersedStatusbar = plus.navigator.isImmersedStatusbar(); 
 // 检测是否支持沉浸式 支持沉浸式状态栏则返回true
 let _statusbarHeight = "24px"; // 设置默认值
 if (isImmersedStatusbar) {
   _statusbarHeight = plus.navigator.getStatusbarHeight(); // 获取系统状态栏高度
 }
 return _statusbarHeight;
}

3、使用
header高度增加状态栏高度，设置padding-top：状态栏高度

---

-- 上面的方法真麻烦

---

二、首页配置

// 若首页为secondwebview，则调整launchwebview为secondwebview即可。
"launchwebview": {
  "statusbar": {
    "background": "#FFF" //状态栏背景色
  }
},
"statusbar": {
  "immersed": true, //开启沉浸式
  "style": "dark"  //状态栏钱景色
  }

参考链接1 http://ask.dcloud.net.cn/article/33
参考链接2 http://ask.dcloud.net.cn/article/1150
参考链接3 http://ask.dcloud.net.cn/article/12622