mui android 状态栏,MUI——设置沉浸式状态栏
沉浸式状态栏类型就是这样的
HBuilder创建的应用默认不使用沉浸式状态栏样式,需要进行如下配置开启:
打开应用的manifest.json文件,切换到代码视图,在plus -> statusbar 下添加immersed节点并设置值为true。
"plus": {
"statusbar": {/*设置沉浸式状态栏*/
"immersed": true
},
"splashscreen": {
"autoclose": true,/*是否自动关闭程序启动界面,true表示应用加载应用入口页面后自动关闭;false则需调plus.navigator.closeSplashscreen()关闭*/
"waiting": false,
"delay": "1000"
}复制代码
如果不生效,在distribute节点下的apple和goole两个节点下添加:
"UIReserveStatusbarOffset": true,(apple节点下添加)
"ImmersedStatusbar": true,/*设置为沉浸栏模式*/(goole节点下添加)
"apple": {
"appid": "",/*iOS应用标识,苹果开发网站申请的appid,如io.dcloud.HelloH5*/
"mobileprovision": "",/*iOS应用打包配置文件*/
"password": "",/*iOS应用打包个人证书导入密码*/
"p12": "",/*iOS应用打包个人证书,打包配置文件关联的个人证书*/
"devices": "universal",/*iOS应用支持的设备类型,可取值iphone/ipad/universal*/
"UIReserveStatusbarOffset": false,/*沉浸式状态栏*/
},
"google": {
"packagename": "",/*Android应用包名,如io.dcloud.HelloH5*/
"keystore": "",/*Android应用打包使用的密钥库文件*/
"password": "",/*Android应用打包使用密钥库中证书的密码*/
"aliasname": "",/*Android应用打包使用密钥库中证书的别名*/
"ImmersedStatusbar": true,/*设置为沉浸栏模式*/
}复制代码
因为设置了沉浸式状态栏。所以此时的状态栏高度为0,这时候我们要手动去添加状态栏的高度,顺便说一下,沉浸式是应用级的,所有页面都会变成沉浸式的,所以最好写成公用的去调用添加状态栏高度。var StatusbarHeight;
// H5 plus事件处理,沉浸式导航
mui.plusReady(function () {
// 获取是否为沉浸式状态栏模式
var bi = plus.navigator.isImmersedStatusbar();
//获取系统状态栏高度
if (mui.os.ios) {
if (screen.height >= 812 && screen.width == 375){
//是iphoneX
StatusbarHeight=44;
}else{
//不是iphoneX
StatusbarHeight=20;
}
} else {
//H5+APP原生获取状态栏高度,如果打包不引入iOS原生,也可以只调用下面这句无需判断。
StatusbarHeight = plus.navigator.getStatusbarHeight();
}
var transparentH=$(".p_nav").eq(0).height();//导航栏高度
var headerH = $('.p_wrapper').eq(0).height();//内容区域高度
if(bi===true){//如果为沉浸式状态栏
$(".bar-nav-con").eq(0).css({height: (transparentH + StatusbarHeight)+'px', 'paddingTop':StatusbarHeight+'px'});
//添加状态栏的高度
$('.p_wrapper').eq(0).css({height: (headerH + StatusbarHeight)+'px', 'paddingTop':StatusbarHeight+'px'});
$('.m_wrapper').eq(0).css({ 'marginTop':StatusbarHeight+'px'});
}
//禁止横屏显示,仅支持竖屏显示
plus.screen.lockOrientation("portrait-primary");
})复制代码
因为导航栏是position:fixed定位的,所以导航栏跟内容区域都要分别添加状态栏高度,具体需求根据个人来定。
最后附上更改状态栏颜色的代码//黑底白字,在沉浸式下就是白色字体
void plus.navigator.setStatusBarStyle( 'light' );
//白底黑字,在沉浸式下就是黑色字体
void plus.navigator.setStatusBarStyle( 'dark' );
// 设置系统状态栏背景为红色,沉浸式下不起作用,因为状态栏高度为零。
plus.navigator.setStatusBarBackground('#red');
复制代码
mui android 状态栏,MUI——设置沉浸式状态栏相关推荐
- Android设置状态栏颜色,沉浸式状态栏 fllutter Android设置沉浸式状态栏
1. Android原生设置沉浸式状态栏,设置状态栏颜色,字体颜色 import android.annotation.TargetApi; import android.app.Activity; ...
- 设置状态栏颜色、沉浸式状态栏
导入依赖: implementation 'com.gyf.immersionbar:immersionbar:3.0.0' gradle.properties加入如下配置,不然可能编译报错: and ...
- android 4.4 以上沉浸式状态栏和沉浸式导航栏管理,一句代码轻松实现
ImmersionBar 项目地址:gyf-dev/ImmersionBar 简介:android 4.4 以上沉浸式状态栏和沉浸式导航栏管理,一句代码轻松实现,以及对 bar 的其他设置,详见 R ...
- Ionic4设置沉浸式状态栏
设置沉浸式状态栏体验比较好,而且有些页面设计需要频繁的改变状态栏的颜色,如果不使用沉浸式,就需要页面离开和进入单独设置状态栏背景色,这就导致会有一个非常明显的过度问题,但是使用沉浸式就可以避免这个问题 ...
- 安卓如何设置沉浸式状态栏,注意处理华为等有虚拟按键的问题
当前安卓开发中,基本都使用了沉浸时候状态栏,拉伸视觉体验,增大了屏幕空间,但是如何设置沉浸式状态栏呢,这里简单进行介绍: if (Build.VERSION.SDK_INT >= Build.V ...
- Android 安卓 自定义标题栏+沉浸式状态栏
Android 安卓 自定义标题栏+沉浸式状态栏 由于Android原生的标题栏单调,简单,并不是很好看,自定义个性化的标题栏可以让app更加美观. Android 4.4以后增加了沉浸式透明状态栏. ...
- Android设置“沉浸式状态栏”的方法
Android系统界面构成 Android系统界面由状态栏.ActionBar和导航栏组成,如下图所示: "沉浸式状态栏"的界面显示效果 沉浸式状态栏,或叫"透明状态栏& ...
- Android 超级简单的沉浸式状态栏
1.两个工具类和一个xml就完成了 直接复制即可 package com.example.tongliaodemo.activity;import android.app.Activity; impo ...
- android 沉浸式状态栏 19,Android 沉浸式状态栏 以及 伪沉浸式状态栏
小菜最近在调整页面状态栏的效果,主要包括沉浸式状态栏和伪沉浸状态栏(同事唠嗑给定义的玩的). 前段时间整理过一篇 Android 沉浸式状态栏的多种样式,现在小菜在稍微的补充一下,都是在日常应用中测试 ...
最新文章
- python处理多个excel文件-Python将多个excel文件合并为一个文件
- usb转ttl模块与matlab,USB接口转TTL小板的自检测试
- Zookeeper常用命令行及API
- 设计模式之单例模式(一)
- 使用extundelete恢复测试liunx的删除文件
- 2012Android开发热门资料110
- 编译并运行Java文件
- sda、sdb 在linux中是什么意思
- 基于 SPI 的增强式插件框架设计
- laravel5整合sendcloud邮箱服务
- 【pwn】长安杯baigei
- 熬夜慢性自杀全过程曝光 | 程序员入坑必读
- 【H2】绘制三角警示牌,使用turtle绘制三角警示牌,陈斌老师北京大学暑期学校Python语言基础与应用
- Python多值函数
- 新中式风格有哪些特点?新中式风格装修有哪些注意事项?
- 鸿蒙系统电视家,华为智慧屏S系列下载哪个直播软件最好?分享用当贝市场下载直播软件方法...
- 互联网征信中的信用评分模型(转)
- 雅虎网站性能优化的34条黄金规则
- python-pygame:实现飞机大战详情(含源码)
- 请碟仙儿│一个区块链思想实验
热门文章
- 启动android模拟器后,界面卡住拖不动的解决方案
- 纯CSS实现图片自适应容器大小
- 百度地图根据当前ip定位
- Windows系统日志分析
- 联想原厂预装出厂系统拯救者小新thinkbook扬天yoga昭阳ideapad
- C++运算符重载详解
- CoreData介绍
- 解决KeyError: ((1, 1, 3), ‘<i8‘) TypeError: Cannot handle this data type: (1, 1, 3), <i8
- 常州新北区有学计算机专业学校,重磅!常州又有6所新学校今年正式招生!
- HashMap中巧妙获取2的幂次