混合开发 h5+ 沉浸式的适配
2024-10-08 22:31:36
1.需要在mainfest.json plus对象里添加
"statusbar": {
"immersed": "true",
"style":"dark"
}
2.新建immersed.js
注意 在里边不适用plus,因为plus.ready之后再js改变样式 必然造成页面闪烁跳动
(function(w){ document.addEventListener('plusready',function(){
//console.log("Immersed-UserAgent: "+navigator.userAgent);
},false); var immersed = 0;
var ms=(/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent);
if(ms&&ms.length>=3){
immersed=parseFloat(ms[2]);
}
w.immersed=immersed; if(!immersed){
return;
} var t=document.getElementsByClassName('mui-bar-nav')[0];
t&&(t.style.height=(t.offsetHeight+immersed-t.style.paddingTop)+'px',t.style.paddingTop=immersed+'px');
var tt=document.getElementsByClassName('mui-content')[0];
tt&&t&&(tt.style.marginTop=(tt.style.marginTop+immersed)+'px');
})(window);
这儿需要注意的是 h5+的api也可以获取 例如
使用5+API 判断当前环境是否支持沉浸式状态栏
plus.navigator.isImmersedStatusbar()
如果当前支持沉浸式状态栏则返回true,否则返回false。
获取当前系统状态栏高度
plus.navigator.getStatusbarHeight()
获取系统状态栏高度,Number类型。
其单位是逻辑像素值,即css中可直接使用的像素值,可能存在小数点。
但是由于时机问题还是推荐拿正则判断,然后在需要的页面引入此js即可
最新文章
- 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\web\4b49f661\23a749fc\App_Web_default.aspx.cdcab7d2.zii776dc.dll”--“拒绝访问。 ” 解决方法:
- 【C#】关于HttpContext.Current.Request.QueryString 你要知道点
- 获取app安装信息私有api
- phantomjs和angular-seo-server实现angular单页面seo
- Pydev Debugger not working with breakpoints
- 【原】React操作表单
- windows docker安装方式的比较小结
- 今天开始着手原来Office系统的重构
- Bootstrap:弹出框和提示框效果以及代码展示
- css样式初始化
- C#实现XML文件数据库存储
- 信号处理程序(signal handler)会被重置的信号
- Seam carving 学习笔记
- centos7 install mysql
- 最近javascript的学习小记
- Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'userinfo.
- IAR Embedded Workbench for ARM 8.22.1 基础使用教程
- 各机器学习方法代码(OpenCV2)
- Jedis操作笔记 redis的五种存储类型
- 解决wamp 3.0.6 访问路径出现 403 错误