uniapp自定义导航栏遮住了手机状态栏问题

最新推荐文章于 2024-09-21 01:36:33 发布

阿强的博客

最新推荐文章于 2024-09-21 01:36:33 发布

阅读量1.9k

点赞数 1

文章标签： uni-app 前端 html

本文链接：https://blog.csdn.net/cv1002420186/article/details/130426384

版权

当使用uniapp进行界面开发时，若需自定义导航栏，可能会遇到导航栏覆盖状态栏的问题。为解决此问题，可以在pages.json中设置`navigationStyle:custom`，并在页面顶部添加一个view元素，设置样式`height:var(--status-bar-height);width:100%;`，这样可以确保导航栏正确显示且不覆盖状态栏。

摘要由CSDN通过智能技术生成

#uniapp在界面自定义导航栏之后，导航栏会自动占在屏幕的状态栏重叠上

解决办法

首先在pages.josn是页面里面加上"navigationStyle": "custom"
然后在使用的页面顶部上加上以下代码

<view class="status_bar" style="height: var(--status-bar-height); width: 100%;">
		</view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿强的博客

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

uniapp 自定义导航栏

08-18

uniapp 自定义导航栏

Uniapp 底部导航栏 自定义 tabBar 全端全页面引用跳转组件

09-23

自定义tabbar底部导航栏，简洁，方便，二开使用教程将组件拷贝到uni_modules目录内，然后其他页面进行引用即可 <TC-tabBar :zhi="zhi"></TC-tabBar> </template>

参与评论您还未登录，请先登录后发表或查看评论

uniapp使用自定义导航栏和手机自带的状态栏重叠

qq_43483403的博客

07-25

1590

uniapp使用自定义导航栏和手机自带的状态栏重叠

uniapp自定义导航栏被手机状态栏覆盖了

cv1002420186的博客

04-13

623

css

uniapp app andriod ios隐藏上下安全距离（白边）、导航栏

最新发布

博客

09-21

526

最近的需求需要沉浸式页面，有几点需要注意，目前测试ios不能单页面设置隐藏，只能全局。环境：uniapp v2版本、hbuilderX。

uniapp 自定义顶部导航栏后导致页面顶部被遮挡

weixin_61945023的博客

03-29

1820

uniapp 自定义顶部导航栏后导致页面顶部被遮挡

uniapp中解决导航栏位置和状态栏位置冲突

weixin_56095898的博客

11-13

1116

当在uniapp中自定义导航栏时，可能会遇到导航栏位置和状态栏位置冲突的问题。

uniapp顶部导航栏被遮住显示问题

红烧咸咸鱼

06-29

2831

uniapp顶部导航栏被遮住显示问题

uniapp开发，app手机状态栏问题挡住问题、小程序关闭过滤无依赖文件

Winsom1的博客

10-14

3784

uniapp入坑问题解决方法

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

12-13

在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，配置编译到App平台的特定样式。dcloud平台对app-plus做了详细说明：app-plus配置，需注意 ...

uniapp组件自定义导航栏（vue父子通讯）

11-25

自定义导航栏组件是通过tabIndex下标来识别所触发的那一模块，为防止服务器压力大内含拦截功能，防止用户多次点击！！！此组件支持多端，内置配置demo！！！！！！喜欢就给点关注吧嘻嘻嘻！！！

微信小程序(uniapp + uView)自定义导航栏

02-29

微信小程序(uniapp + uView)自定义导航栏

前端uniapp自定义tabbar在iPoneX上底部被遮住问题

FUFCY的博客

06-08

964

前端uniapp自定义tabbar在iPoneX上底部被遮住问题

uniapp navigationStyle: custom 取消默认原生导航栏 导致页面顶部进入状态栏区域问题

tengyuxin的博客

09-15

3161

关于style和background两个字段，虽然一个管理状态栏的前景颜色，一个管理系统状态栏的背景色，但是这种配置权限不高，容易被pages.json内部配置覆盖，也不灵活，所以我就没有使用。在uniapp官网全局文件 --> manifest.json应用配置--> App完整manifest.json里面，之后全局全局搜索(ctrl+f) statusbar的配置。第二，切换到代码视图，在app-plus -> statusbar 下添加immersed节点并设为false。

uniapp自定义导航栏与手机状态栏重叠问题

weixin_39061000的博客

12-01

2218

HBuildX 创建的应用默认是沉浸式样式，去除自带的导航栏后，页面直通手机顶部状态栏，即页面与手机状态栏重叠问题处理：配置mainfest.json来关闭沉浸式，打开应用的manifest.json文件，打开源码视图，如下代码所示： "app-plus" : { "statusbar": { "immersed": false }, } ...

uniapp 解决状态栏问题

lwcyyds的博客

05-11

911

然后在给属性添加 margin-top: var(--status-bar-height);uniapp开发中拟器与手机实际效果有一定差别。可以创建一个view标签添加一个class属性。这样就解决了状态栏遮挡的问题了。

uniapp 如何自定义导航栏并自适应机型

一只猫

09-14

986

在设计页面顶部导航栏时，可以根据safeAreaInsets.top的值来调整导航栏的位置，使其在不同设备上都能正确显示，避免被刘海区域遮挡。

uni-app去除手机的状态栏(像电量、信号、时间等)

qq_43787947的博客

07-14

2794

【代码】uni-app去除手机的状态栏(像电量、信号、时间等)

使用uniapp编译多端，自定义导航栏高度、状态栏的高度

Dreamy smile

09-01

1645

使用uniapp框架编译多端，在使用自定义导航栏的时候需要适配不同手机，在安卓和ios上手机的状态栏高度是不一样的，尤其是小程序。 uni.getSystemInfo(); //在小程序上使用这个方法去获取,应为iphonex的高度和其他型号的高度不一样。 uni.getSystemInfo({ success: (data) => { data.statusBarHeight => 手机状态栏高度 data.statusBarHeight + 44 => ios手机状态栏+.

uniapp 自定义导航栏 状态栏高度

08-23

您好！对于UniApp中自定义导航栏和状态栏高度的问题，您可以按照以下步骤来实现： 1. 首先，在App.vue文件中，导航栏和状态栏的高度可以通过uni.getSystemInfoSync()方法获取系统信息来动态计算。例如，可以在onLaunch生命周期中获取系统信息并将其存储在全局变量中： ```javascript onLaunch: function() { const systemInfo = uni.getSystemInfoSync(); uni.$app.globalData.statusBarHeight = systemInfo.statusBarHeight; uni.$app.globalData.navBarHeight = systemInfo.statusBarHeight + 44; // 44为导航栏默认高度 } ``` 2. 接下来，在需要使用自定义导航栏的页面中，可以将导航栏的高度设置为全局变量中存储的值： ```css /* 在页面的样式文件中 */ .custom-nav-bar { height: {{ $app.globalData.navBarHeight }}px; } /* 在页面的模板文件中 */ <view class="custom-nav-bar">自定义导航栏</view> ``` 3. 如果需要在页面中使用状态栏的高度，可以将状态栏的高度设置为全局变量中存储的值： ```css /* 在页面的样式文件中 */ .custom-status-bar { height: {{ $app.globalData.statusBarHeight }}px; } /* 在页面的模板文件中 */ <view class="custom-status-bar">自定义状态栏</view> ``` 通过以上步骤，您就可以实现UniApp中自定义导航栏和状态栏高度的设置了。希望对您有所帮助！如有任何问题，请随时提问。