app沉浸式导航栏相关处理（适用于Hbuilder打包项目）

最新推荐文章于 2024-04-22 10:53:29 发布
最新推荐文章于 2024-04-22 10:53:29 发布
阅读量1.1k 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44283145/article/details/109289109
版权

在移动端，很多的app都需要设置沉浸式导航栏，但是手机适配又成了一个很大的问题。所以通过获取手机状态栏高度，再增加页面padding的方法应该是最好的，可以适应各种妖孽手机。首先需要在HBuilder的配置文件中设置沉浸式导航，找到manifest.json件下的plus对象，然后贴如下面代码：

	"statusbar": {
   
		"immersed": true/*沉浸式状态栏*/
	},

下面代码片段是获取移动端状态栏高度的。
注：此代码写在main.js中


//由于plus模块需要加载，所以这里我使用了延时处理

setTimeout
最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 沉浸式状态栏与隐藏导航栏实例详解
01-20
可以看到，有状态栏、ActionBar(ToolBar)、导航栏等,一般来说，APP实现沉浸式有三种需求：沉浸式状态栏，隐藏导航栏，APP全屏 沉浸式状态栏是指状态栏与ActionBar颜色相匹配， 隐藏导航栏不用多说，就是将导航栏隐藏...
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
10-17
主要介绍了vue项目 使用Hbuilder打包app 设置沉浸式状态栏的方法，本文通过实例代码效果图展示给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
HbuilderX打包Wap2App应用
mojocube的博客
06-04 2138
下载地址：https://www.dcloud.io/hbuilderx.html 1.新建项目 2.选择图标 3.选择启动图片 4.设置配置文件，下面的代码主要是去掉了默认的导航栏和退出时不要显示反馈信息 { "global": { "webviewParameter": { "titleNView": { "autoBackButton": true, "bac
Android 实现沉浸式状态栏终极大招---只需一个工具类
最新发布
2401_84121499的博客
04-22 1036
/透明状态栏//透明导航栏// 激活状态栏//判断是否需要更改状态栏颜色}else{= null) {//注意不是设置 ContentView 的 FitsSystemWindows, 而是设置 ContentView 的第一个子 View . 预留出系统 View 的空间.使用方式 StatusBarUtil.setStatusBarLayoutStyle(this,true or false);
HBuilder 打包webapp 设置沉浸式状态栏
weixin_40151813的博客
01-20 1286
1.在manifest.json 要设置 "fullscreen": false； 2.在 manifest.json 设置 "plus": { "launchwebview": { "statusbar": { "background": "#00933c" } }, ...
沉浸式，状态栏高度，刘海屏怎么开启，怎么适配？看这！
Yxc_Programmer的博客
09-23 1101
何为沉浸式？ 沉浸式就是app的头部和状态栏和何为一体的，webview即为整个手机的高度 何为状态栏？ 状态栏就是手机顶部，显示时间电量那一行 除此还有刘海屏，水滴屏，挖孔屏，全面屏，非刘海屏，不同手机状态栏高度又不太一样，需要我们去适配，有一个段子说，如果看到那个手机适配有问题，赶紧把那个手机藏起来，不要让测试发现了。 我们用HBuilder创建的应用默认是不开启沉浸式的，需要我们手...
hbuilder（mui） 设置沉浸式状态栏后顶部有灰条的问题解决
yangbaobao的博客
06-06 1705
"plus": { "statusbar": { "immersed": true } } 敲黑板 iOS11以上系统当启用沉浸式式状态栏后，webview默认会调整内容至安全区域之内，视觉效果如下图: 如果不需要自动调整可以在meta(name="viewport")节点的 content属性值中添加viewport-fit=cov...
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
10-14
主要介绍了浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cli或vue项目利用HBuilder打包成移动端app操作
10-15
主要介绍了vue-cli或vue项目利用HBuilder打包成移动端app操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uni-app导航栏和状态栏配置
daoxiaofei的博客
11-25 5754
参考：官网uni-app导航栏开发指南。 1.1 原生导航栏-通用配置 (1) 原生导航优点 原生导航的体验更好，渲染新页面时，原生导航栏的渲染无需等待新页面dom加载，可以在新页面进入动画开始时就渲染。 原生导航还可以避免滚动条通顶，并方便的控制原生下拉刷新。通过pages.json的配置，可以简单的、跨端的、高性能的开发业务。 (2) 原生导航缺点 原生导航栏的扩展能力有限的。尤其是微信下，没有提供太多导航栏的配置。 (3) 原生导航栏的通用配置： uni-app 自带原生导航栏，在page.
ImmersedStatusBar:Android沉浸式状态栏兼容方案
05-11
Android沉浸式状态栏兼容方案 用途 重点针对浅色状态栏的适配, 即白底黑字, 具体应用可参见 微博 兼容方案 对于支持[状态栏透明 + 状态栏文字图标黑白切换]的机型(Android 6.0及以上, MIUI v6及以上, Flyme 4.0及以上), 全透明状态栏 + 黑色文字图标 对于仅支持[状态栏透明]的机型(Android 4.4及其以上), 采用: 半透明状态栏 + 白色文字图标 对于不支持的机型(Android 4.4以下), 采用默认状态: 黑色状态栏 + 白色文字图标 效果展示 1. 对于情况1的显示效果 2. 对于情况2的显示效果 Android 5.x Android 4.4显示效果 3. 对于情况3的显示效果略 .. 使用 见Demo
《H5 App开发》HBuilder打包成app 状态栏的颜色问题
qq_42660374的博客
03-07 402
《H5 App开发》HBuilder打包成app 状态栏的颜色问题
史上最完美的Android沉浸式状态导航栏攻略
qq_34231329的博客
02-24 5146
在状态栏和导航栏沉浸式这一块，我还是踩了挺多坑，费了挺多精力的，这次我将我踩坑，适配各机型总结出来的史上最完美的Android沉浸式状态导航栏攻略分享给大家
hbuilder 沉浸式状态栏
Lycoris_Red的博客
07-16 1105
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
HBuilderX打包web网站之wap2app设置底部菜单tabBar
sinat_25884075的博客
07-06 1853
上面是真实案例，首页、在看、我的就是我设置的菜单，还可以设置图标，填写图片网络地址就行。下面是代码，可以直接用：第一步，先下载2个文件或者复制也行，那就新建吧:分别新建一个css文件，命名为 __wap2apptabbar.css 第个文件命名为：__wap2apptabbar.js 第三步，取消注释： 第四步，在client_index.html设置tabBar代码： 第6步，在sitemap.json文件配置一下： 第7步，运行到真机上测试了，ok了。官方文档说明：选项卡切换优化
Android 导航栏适配
ming0gy的博客
02-07 226
【代码】Android 导航栏适配。
vue打Hbuilder打包app，设置沉浸式状态栏
qq_23260639的博客
03-15 7980
在mainfest.json的plus中以下位置添加statusbar内容"plus": { "statusbar":{ "immersed": true/*沉浸式状态栏*/ }, "splashscreen": { "autoclose": true,/*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；...
hbuilder沉浸式状态栏的设置方法
H的博客
03-22 2088
@TOC沉浸式状态栏 #“plus”: { “statusbar”:{ “immersed”: true/沉浸式状态栏/}, “splashscreen”: { “autoclose”: true,/是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplas...
uniapp沉浸式导航栏
07-27
在uni-app中实现沉浸式导航栏可以通过修改页面的style属性来实现。具体步骤如下： 1. 在page.json文件中找到要实现沉浸式导航栏的页面，添加以下代码到该页面的style属性中： ``` "style": { "navigationStyle":...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值