uni-app 沉浸式导航栏取消之后获取不到导航栏高度

最新推荐文章于 2024-08-03 23:37:05 发布
最新推荐文章于 2024-08-03 23:37:05 发布
阅读量1.1k 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35355153/article/details/106564496
版权

在uni-app中默认开启沉浸式

此时会发现开启了沉浸式可能会遇到：

自定义导航栏在软键盘弹起时会将自定义导航栏顶上去（当点击下方input时）

图片说法

在沉浸式中，在点击input3/input4的时候出现问题，页面变成

导致自定义导航栏被顶上去的情况

解决办法：此时在配置文件中将沉浸式去掉

"statusbar": {  
		        "immersed": false  
		    },

 

然后发现试用uni-app给出的api    uni.getSystemInfoSync().statusBarHeight 获取不到导航栏的高度了

 

解决办法：使用 ： plus.navigator.getStatusbarHeight()

rm_ing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于uni-app的沉浸式导航栏配置
jxjianghailan的博客
07-23 3331
本文是基于uni-app的沉浸式导航栏配置 uni-app的官网： https://uniapp.dcloud.io/collocation/pages 这些配置在pages.json中，如下： 为了设置沉浸式导航栏：点击“pages”，跳进下图位置，再点击pageStyle 可以看到style，用于设置每个页面的状态栏、导航条、标题、窗口背景色等。 在代码中就是 设置之后就可以达到如下效果： ...
uniapp自定义导航栏高度问题
Explore_2023的博客
10-16 1328
选择哪一个取决于你的项目需求和对设备的兼容性要求。如果你希望确保在刘海或圆角设备上有更好的显示效果，那么使用。这篇文档，展示了设置不同设备的navbar高度的方法，其用的是statusBarHeight，是一个更安全的选择。如果你只需要考虑通用设备，那么。
uniapp计算手机状态栏高度和微信小程序导航栏高度
m0_70265923的博客
07-22 288
【代码】uniapp计算手机状态栏高度和微信小程序导航栏高度。
uniapp自定义头部(官方状态栏高度var(--status-bar-height)失效后的处理)
热门推荐
qq_43217258的博客
12-16 1万+
说明：之前都是用uview UI自定义头部，发现现在他的插槽无法解决我的需求后，决定自己写一个，但是遇到了一堆坑，最恶心的是var(–status-bar-height)，获取手机状态栏高度这个属性失效了，没办法自己获取手机状态栏高度去了 代码说明：核心函数是状态栏高度（statusBarHeight）+ 底部高度（48px） 这里安卓是44px，ios是48px，我偷懒没做处理，直接用的48px 效果图： 组件代码： <template> <view class="myHeader"
uniapp 设置状态栏高度
最新发布
weixin_50755029的博客
08-03 247
1、在components -> navbar 中。
android 获取状态栏高度为0的解决办法
金佳杰
12-18 1908
/** * 获取通知栏的高度 * @param activity * @return */ public static int getStatusBarHeight(Activity activity){ Rect rect = new Rect(); activity.getWindow().getDecorView().getWindowVisibleDisplay
android获取状态栏高度为0的解决办法
weixin_30733003的博客
05-27 177
网上流行一段代码获取状态栏高度 如下： Rect frame =newRect(); getWindow().getDecorView().getWindowVisibleDisplayFrame(frame); intstatusBarHeight = frame.top; 但是这个方法在 onCreate()方法中，获取高度为0 不在onCreate()方法中是有效的...
uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip
12-17
"uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip" 是一个针对uni-app框架的项目，其核心功能是实现自定义底部导航栏。uni-app是一个多端开发框架，允许开发者使用一套代码生成包括iOS、Android、H5...
uniapp框架-uni-app自定义导航栏-uni-app项目源码-vue语法格式.zip
05-21
从多级选择器到自定义导航栏，再到二维码生成器，UniApp的控件封装合集为开发者提供了极大的便利。 面向未来，UniApp将继续优化性能，拓展功能，满足更多开发者的需求。如果你正在寻找一个高效、便捷的跨平台开发...
uniapp框架-uni-app自定义底部导航栏-uni-app项目源码-vue语法格式.zip
05-21
从多级选择器到自定义导航栏，再到二维码生成器，UniApp的控件封装合集为开发者提供了极大的便利。 面向未来，UniApp将继续优化性能，拓展功能，满足更多开发者的需求。如果你正在寻找一个高效、便捷的跨平台开发...
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
10-16
在开发uni-app项目时，开发者经常需要对应用的导航栏进行自定义，以满足个性化需求。uni-app作为一款使用Vue.js技术开发的前端框架，借助其灵活性和易用性，使得开发者可以很快上手进行开发。本文将深入探讨如何在...
解决uniapp用了uni.getSystemInfo获取状态栏高度在app上获取不到问题
FUFCY的博客
05-27 4023
出现的情况 刚开始写法 是用了 uni.getSystemInfo({ success:(e)=> { this.statusBarHeight = e.statusBarHeight; } }) <template> <view class="main" :style="{marginTop:statusBarHeight+'px'}"&...
三步实现沉浸式状态栏（即状态栏与APP同色）
Java修炼记
03-30 1万+
本篇实现的是沉浸式状态栏。 其实，实质上就是使手机状态栏的颜色改变，使其成为自己想要的颜色。如果把它设置成和APP主色调相同，这样看上去就会好看许多。
使用uni.getSystemInfo获取手机信息，设置动态导航栏+状态栏的高度。
weixin_44694389的博客
11-27 3455
onLoad(){ //获取状态栏+导航栏的高度 let _that = this; uni.getSystemInfo({ success(e) { if(e.platform == "ios"){ _that.statusBarHeight = e.statusBarHeight + 45; }else{ _that.statusBarHeight = e.statusBarHeight + 50; } } }) } 注意：微信小程序的e.pl.
android水滴屏适配webview,沉浸式，状态栏高度，刘海屏怎么开启，怎么适配？看这！...
weixin_34370877的博客
05-27 1768
何为沉浸式？沉浸式就是app的头部和状态栏和何为一体的，webview即为整个手机的高度何为状态栏？状态栏就是手机顶部，显示时间电量那一行除此还有刘海屏，水滴屏，挖孔屏，全面屏，非刘海屏，不同手机状态栏高度又不太一样，需要我们去适配，有一个段子说，如果看到那个手机适配有问题，赶紧把那个手机藏起来，不要让测试发现了。我们用HBuilder创建的应用默认是不开启沉浸式的，需要我们手动如下配置开启。打开...
uniapp开发App，手机顶部状态栏问题
于忠会的博客
10-17 1276
打开应用的manifest.json文件，打开源码视图，app-plus 下添加 statusbar >immersed节点并设置值为false。方法1：可以使用uniapp官方文档提供的解决方案 https://uniapp.dcloud.io/collocation/pages?问题：在使用uniapp开发手机App时，因为HBuildX创建的应用默认是沉浸式样式，如果去除自带的导航栏之后，页面会直通手机顶部状态栏，解决办法有一下几个。
uniapp nvue web-view不显示 宽高设置不生效
qq_27007423的博客
08-19 6892
1.nvue web-view需要手动设置宽高 2.设置百分比丶px宽高无效，需要使用flex 1 才能铺满全屏 <template> <view class="work_index"> <!-- @onPostMessage="htmlMessage" --> <!-- optionData.appLink --> <web-view class="webView_class" :webview-styles="webviewStyle
关于h5页面内嵌到app，并悬浮隐藏顶部原生导航栏后获取不到状态栏高度的问题，解决方案如下：
qq_31666019的博客
07-19 739
h5内嵌到原生app，隐藏顶部导航栏，h5获取不到顶部导航栏高度问题
uniapp开发，app手机状态栏问题挡住问题、小程序关闭过滤无依赖文件
Winsom1的博客
10-14 3698
uniapp入坑 问题解决方法
uniapp底部导航栏有时候失效
08-03
UniApp 底部导航栏有时可能会出现失效的情况，这可能是由于以下几个原因： 1. **组件层级混乱**：如果底部导航栏位于非预期的位置，比如不是放置在最外层页面的 App.vue 或 main.js 中，它可能无法正常显示。 2. **状态管理**：当你的应用状态发生变化而底部导航关联的数据未同步更新时，也可能导致显示异常。 3. **样式冲突**：如果应用中有其他自定义样式覆盖了默认的底部导航栏样式，可能导致其显示不正常。 4. **生命周期钩子错误**：检查 `onReady`、`onShow` 等生命周期钩子的执行是否正确，因为它们对页面加载有影响。 5. **代码错误**：检查是否有语法错误、引用错误或逻辑错误，如未正确注册底部导航栏组件等。 修复这个问题的一般步骤包括： - 检查并确保底部导航栏是在所有页面共有的配置文件中正确声明和初始化的。 - 调试代码，查看是否有任何错误提示或者控制台日志。 - 清理并确认样式是否正确设置了导航栏的可见性和定位。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值