只需要放到全局js里面 就可以实现
沉浸式状态栏布局
mui.plusReady(function() {
//判断是否支持沉浸式
var isImmersedStatusbar = plus.navigator.isImmersedStatusbar();
if(isImmersedStatusbar){
//获取状态栏高度
var StatusbarHeight = plus.navigator.getStatusbarHeight();
//获取元素计算后的高度
var heightH = document.getElementsByClassName('mui-bar-nav')[0].offsetHeight;
//设置导航栏高度为原高度+状态栏高度+设置内边距高度为状态栏高度
document.getElementsByClassName('mui-bar-nav')[0].style.height=heightH+StatusbarHeight+'px';
document.getElementsByClassName('mui-bar-nav')[0].style.paddingTop=StatusbarHeight+'px';
//设置content 样式内上边距增加状态栏高度
document.getElementsByClassName('mui-content')[0].style.paddingTop = heightH + StatusbarHeight + 'px';
}
})
如果感兴趣,也可以关注我的微信公众号,因为刚起步,所以只有几篇文章,之后会慢慢更新。