首页 课程中心 问答&分享 读书 公众号框架 HUI H.JS 开放源 登录 & 注册
 H5+ 沉浸式状态栏详解
发布时间 : 2017-07-05  浏览 : 17298 次

实现过程
1、改写manifest.xml,在plus对象内增加:

"plus": {
     "statusbar": {"immersed": true},

2、判断系统是否支持沉浸式,并改写对应头部的padding-top:

hui 框架实例:

hui.plusReady(function(){
 //判断是否支持沉浸式
 var isImmersedStatusbar = plus.navigator.isImmersedStatusbar();
 console.log(isImmersedStatusbar);
 //获取系统状态栏高度
 var StatusbarHeight = plus.navigator.getStatusbarHeight();
 console.log(StatusbarHeight);
 hui('.hui-header').css({'paddingTop':StatusbarHeight + 'px'});
 hui('#hui-back').css({top:StatusbarHeight+'px'});
});


hui 快速实现沉浸式

hui.immersedStatusbar(); 
//说明 在hui.js 中直接执行即可生效至整个APP,如果只需指定页面实现则在指定页面执行此函数即可!


mui 框架实现沉浸式

mui.plusReady(function(){
 //判断是否支持沉浸式
 var isImmersedStatusbar = plus.navigator.isImmersedStatusbar();
 console.log(isImmersedStatusbar);
 //获取系统状态栏高度
 var StatusbarHeight = plus.navigator.getStatusbarHeight();
 console.log(StatusbarHeight);
 var headerH = h('.mui-bar-nav').eq(0).height();
 console.log(headerH);
 h('.mui-bar-nav').eq(0).css({height: (headerH + StatusbarHeight)+'px', 'paddingTop':StatusbarHeight+'px'});
});


原始导航模式
导航配置

"launchwebview":{
    "navigationbar": {
        "backgroundcolor": "#990000",
        "titletext": "hcoder",
        "titlecolor": "#FFFFFF"
    }
},

沉浸式配置

"statusbar": {
     "immersed": "supportedDevice",
    "style":"dark"
}


课程介绍:
详细讲解H5+ 沉浸式状态栏实现过程!
课程章节
教程更新
More...