hbuilder沉浸式状态栏的设置方法

最新推荐文章于 2024-10-29 07:36:25 发布
最新推荐文章于 2024-10-29 07:36:25 发布
阅读量2.2k 收藏
点赞数 1
分类专栏： 混合APP开发问题集合 文章标签： hbuilder 混合APP开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42036591/article/details/88733421
版权

在mainfest.json的plus中以下位置添加statusbar内容

"plus": {
	"statusbar":{  
	  		"immersed": true/*沉浸式状态栏*/},
	  		"splashscreen": {
	  		            "autoclose": true,/*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/
        	"waiting": true/*是否在程序启动界面显示等待雪花，true表示显示，false表示不显示。*/},
app沉浸式导航栏相关处理（适用于Hbuilder打包项目）
weixin_44283145的博客
12-15 1473
在移动端，很多的app都需要设置沉浸式导航栏，但是手机适配又成了一个很大的问题。所以通过获取手机状态栏高度，再增加页面padding的方法应该是最好的，可以适应各种妖孽手机。首先需要在HBuilder的配置文件中设置沉浸式导航，找到manifest.json件下的plus对象，然后贴如下面代码： "statusbar": { "immersed": true/*沉浸式状态栏*/ }, 下面代码片段是获取移动端状态栏高度的。 注：此代码写在main.js中 //由于plus模块需要加载，所以这
HBuilder开发旅游类APP(二) ----- mui结合H5+,快速实现首页、登录、注册等功能
c987018237的博客
04-19 4186
HBuilder开发旅游类APP(二) — mui结合H5+,快速实现首页、登录、注册等功能 作者：班尼科 本博文是本人原创，喜欢请给我点赞，转载请注明出处哦. 标签： 旅游 H5+ MUI 标题栏 沉浸式状态栏 目的： H5+项目和mui项目结合，不懂js也能开发APP 【前言】 H5+项目是原生HTML5+做的API，比如在使用二维码时，需要使用plus.barcode，其他地方，有可...
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
12-12
使用 Hbuilder新建好移动app项目后，mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusbar": { "immersed": true }, ...... }, ..... 效果 总结 以上所述是小编给大家介绍的vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
hbuilder 沉浸式状态栏
Lycoris_Red的博客
07-16 1253
1.在mainfest.json的plus中以下位置添加statusbar内容 "plus": { "statusbar":{ "immersed": true/*沉浸式状态栏*/ } } 2、获取状态栏高度 方法一： var immersed = 0; var ms=(/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent); if(ms&&ms.lengt
vue打Hbuilder打包app，设置沉浸式状态栏
qq_23260639的博客
03-15 8069
在mainfest.json的plus中以下位置添加statusbar内容"plus": { "statusbar":{ "immersed": true/*沉浸式状态栏*/ }, "splashscreen": { "autoclose": true,/*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；...
hbuilderx设置状态栏
菜菜鸟的博客
11-02 7994
一、 前言 状态栏就是手机屏幕最顶部的区域，包括了：信号、运营商、电量等信息。通常APP都有属于自己的色调风格，为了达到整体视觉美观，通常会设置状态栏和标题栏的色调设置成一致。 图例： 二、状态栏状态类型 默认 变色（设置颜色） 透明（沉浸式） 消失（全屏） 三、状态栏变色 1.效果如图： 2.根据色调设置状态栏文字颜色，文字颜色只提供两种值：light（白色）、dark（黑色） 3.设置标题栏...
HbuilderX打包的vue项目，状态栏问题
sywdebug的博客
08-11 1154
场景：老总让做的那个 APP，页面改来改去，最后做完了，状态栏需要沉浸背景，状态栏文字颜色也要改上集说到解决 HbuilderX 打包的 vue 项目，物理返回键问题，当时装了 mui 框架，这个也需要，安装方法可以看之前那个有写，
HBuilderX 打包 vue 项目生成 apk
GIS（地理信息系统）
07-15 1729
HBuilderX 打包 vue 项目生成 apk
HBuilder设置APP状态栏
dashen0002的博客
04-25 1409
一、 前言 　　状态栏就是手机屏幕最顶部的区域，包括了：信号、运营商、电量等信息。通常APP都有属于自己的色调风格，为了达到整体视觉美观，通常会设置状态栏和标题栏的色调设置成一致。 　　图例： 　　 二、状态栏状态类型 默认 变色（设置颜色） 透明（沉浸式） 消失（全屏） 三、状态栏变色 　　1.效果如图： 　　2...
react 通过HBuilder X打包为app后，状态栏颜色设置
xwj12138的博客
02-25 942
react 通过HBuilder X打包为app后，状态栏颜色设置
hbuilder下沉浸式状态栏设置
weixin_33712881的博客
02-07 794
1：在【manifest.json】文件中，在【plus-->distribute--> apple】下加上【 "UIReserveStatusbarOffset":false】，在【google】下加上【"ImmersedStatusbar":true】2：配置完之后在引入的样式css中加上【.mui-ios header{ padding-top: 8px !...
HBuilder工具栏不小心隐藏了该怎么显现?
懒惰的小妖
05-15 1万+
在工具栏处右击会显示隐藏工具栏,如果不需要可以隐藏,如果一不小心隐藏的,想用的时候不方便.所以我们就让它显示. 1.HBuilder 视图-->显示工具栏. ok .如上图. ...
Hbuilder html5+沉浸式状态栏
真是6的不行的博客
10-29 538
2、重新运行应用（有时候必须要重启）
沉浸模式
litong0310的博客
10-12 651
//沉浸模式 @Override public void onWindowFocusChanged(boolean hasFocus) { super.onWindowFocusChanged(hasFocus); if (hasFocus && Build.VERSION.SDK_INT >= 19) { View decorView = getWind
HBuilder修改statusbar样式
championf的博客
12-01 6254
在HBuilder项目中如何修改状态栏样式如果你初次接触HBuilder会遇到修改状态栏颜色的问题，那么这篇文章就可能帮到你，那么不BB，上车吧~ 设置背景图片 body{ background-image: url(img/background.png); background-repeat: no-repeat;
hbuilderx设置新建jsx后缀名_hbuilderx设置状态栏
weixin_40006265的博客
12-19 293
一、 前言状态栏就是手机屏幕最顶部的区域，包括了：信号、运营商、电量等信息。通常APP都有属于自己的色调风格，为了达到整体视觉美观，通常会设置状态栏和标题栏的色调设置成一致。二、状态栏状态类型默认变色(设置颜色)透明(沉浸式，无高度)消失(全屏)三、状态栏变色1.效果如图：在这里插入图片描述2.根据色调设置状态栏文字颜色，文字颜色只提供两种值：light(白色)、dark(黑色)3.设置标题栏背景...
【学习笔记】HBuilder状态栏隐藏显示及颜色
热门推荐
个性小资的博客
01-06 2万+
最近在看HBuilder文档时针对顶部状态栏如何隐藏/显示及如何设定颜色有一些疑问，也看了不少人问得问题和解答，总结出来几个方法，和大家分享下默认的含mui的html文件都会包含<script type="text/javascript" charset="utf-8"> mui.init(); </script>设置系统状态栏背景颜色（iOS7及以上生效）mui.init()方法是用来初始
HBuilder 设置沉浸式状态栏显示效果
u012542541的博客
09-17 6255
1.在manifest.json 要设置 "fullscreen": false； 2.在 manifest.json 设置 "plus": { "launchwebview": { "statusbar": { "background": "#00933c" }
uniapp上面导航栏无法遮盖
最新发布
03-13
### 解决 UniApp 中自定义导航栏遮盖默认导航栏的方法 为了实现 UniApp 应用程序中自定义导航栏能够有效遮挡默认导航栏，需采取特定配置措施来确保页面布局不会与手机顶部状态栏发生冲突。 对于微信小程序环境，在 `pages.json` 文件中针对具体页面设定 `"navigationStyle": "custom"` 属性可以关闭默认导航栏仅留下返回胶囊按钮[^1]。此操作允许开发者自行设计并放置个性化导航组件而不受原有样式限制。 当涉及到跨平台应用开发时（如使用 UniApp），考虑到不同终端设备间可能存在差异化的视觉呈现效果，建议利用 CSS 变量机制适配各种屏幕尺寸下的状态栏高度。通过设置 `.status_bar {height: var(--status-bar-height);}` 来预留足够的空间防止内容溢出至状态栏区域之外[^2]。 另外值得注意的是，在 HBuilderX 构建的应用里，默认采用沉浸式主题风格可能导致取消原生头部后出现界面元素上浮现象。此时可通过调整视图结构顺序或将根节点容器的 padding 或 margin 设置为等于状态栏的高度值以修正该问题[^3]。 最后，为了避免自定义部分被其他 UI 组件意外覆盖，应当仔细规划 z-index 值以及其他定位属性，保证新加入的控件始终位于最前端可见位置。同时也要注意测试多款主流机型上的表现一致性，从而提供更佳用户体验。 ```html <template> <view class="container"> <!-- 状态栏占位 --> <view class="status_bar"></view> <!-- 自定义导航栏 --> <view class="navbar">这里是自定义导航栏</view> <!-- 页面主体内容 --> <scroll-view scroll-y="true" class="page-content"> ... </scroll-view> </view> </template> <style scoped> .status_bar { height: var(--status-bar-height); } .navbar { /* 根据需求定制 */ } .page-content { /* 主要内容区样式 */ } </style> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值