uniapp移除导航栏后页面与手机状态栏重叠

最新推荐文章于 2024-06-20 13:41:59 发布
最新推荐文章于 2024-06-20 13:41:59 发布
阅读量1.3k 收藏 8
点赞数
分类专栏： uniapp 文章标签： uni-app 前端 android ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Greenhand_BN/article/details/114985036
版权
uniapp移除导航栏后页面与手机状态栏重叠问题

如图
在这里插入图片描述
问题原因

HBuildX 创建的应用默认是沉浸式样式，如果去除自带的导航栏之后，页面就会与手机顶部状态栏重叠

解决方案
mainfest.json 源码视图中 app-plus 下添加如下代码

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

如图
在这里插入图片描述
解决之后的效果图
在这里插入图片描述

Greenhand_BN
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
分别用ToolBar和自定义导航栏实现沉浸式状态栏
08-31
`fitsSystemWindows`属性确保ToolBar适应系统窗口，避免与状态栏重叠；`minHeight`则设置ToolBar的高度与Action Bar大小相匹配。 ```xml android:id="@+id/tool_bar" android:layout_width="match_parent" ...
YeyyNavigationBar
08-06
- 布局重叠：检查布局嵌套和层级，避免其他元素覆盖底部导航栏。 总的来说，"YeyyNavigationBar"是作者对底部导航栏功能的一种实践和封装，它为开发者提供了更便捷的方式来实现这一组件，同时可能包含了作者对于...
uniapp开发App，手机顶部状态栏问题
于忠会的博客
04-17 800
打开应用的manifest.json文件，打开源码视图，app-plus 下添加 statusbar >immersed节点并设置值为false。方法1：可以使用uniapp官方文档提供的解决方案 https://uniapp.dcloud.io/collocation/pages?问题：在使用uniapp开发手机App时，因为HBuildX创建的应用默认是沉浸式样式，如果去除自带的导航栏之后，页面会直通手机顶部状态栏，解决办法有一下几个。
uniapp 解决app头部导航和手机顶部状态栏叠加问题及样式拼接写法
m0_46978096的博客
01-20 4224
app开发，手机顶部状态栏会和app头部导航叠加在一起 解决方法：拿到顶部状态栏的高度，再给头部导航加个padding-top 在app.vue里拿到状态栏的高度并存放在globalData里 onLaunch() { const that = this; uni.getSystemInfo({ success(res) { that.globalData.statusBarHeight = res.statusBarHeight; } }) }, globalData:{ statu
[保姆级教程]uniapp自定义导航栏
最新发布
肥晨开发的学习之路
06-20 3253
在你的页面.vue文件中，使用或标签在页面顶部添加自定义的导航栏视图。这可以包括标题文本、返回按钮、搜索框等。
uniapp中解决导航栏位置和状态栏位置冲突
weixin_56095898的博客
11-13 856
当在uniapp中自定义导航栏时，可能会遇到导航栏位置和状态栏位置冲突的问题。
uniapp移除原生导航栏后页面与手机状态栏重叠问题
Greenhand_BN的博客
09-23 2876
原因：HBuildX 创建的应用默认是沉浸式样式，如果去除自带的导航栏之后，页面会直通手机顶部状态栏，也就是遇到的页面与手机状态栏重叠问题 解决：配置mainfest.json来关闭沉浸式，打开应用的manifest.json文件，打开源码视图，如下代码所示，在 app-plus 下添加 statusbar ，并将其下 immersed 的值设为 false "app-plus" : { "statusbar": { "immersed": false }, }
uniapp自定义导航栏遮住了手机状态栏问题
cv1002420186的博客
04-28 1793
【代码】uniapp自定义导航栏遮住了手机状态栏问题。
xhtml+css制作不规则导航
10-30
在本文中，我们将探讨如何使用XHTML和CSS来创建梯形状或其他不规则形状的导航栏。 首先，我们需要了解XHTML和CSS的基础知识。XHTML（Extensible HyperText Markup Language）是一种更严格、更纯净的HTML版本，它...
使用CSS的position属性控制页面布局的入门教程
09-24
固定定位的元素在页面滚动时位置保持不变，这使得fixed元素在进行导航栏、页脚固定等场景时非常有用。例如，在一个很长的页面中，你可以将页脚设置为fixed，这样它将始终固定在屏幕底部，即使页面滚动，也不会消失。...
BottomBar.rar
08-03
总的来说，"BottomBar.rar" 包含的资源可能是用于快速集成和自定义底部导航栏功能的Android库，解决了Fragment重叠和视觉叠影等问题，提高了用户体验。通过理解和运用上述知识点，开发者可以有效地在自己的项目中...
uniapp使用自定义导航栏和手机自带的状态栏重叠
qq_43483403的博客
07-25 1434
uniapp使用自定义导航栏和手机自带的状态栏重叠
uniapp navigationStyle: custom 取消默认原生导航栏 导致页面顶部 进入状态栏区域问题
tengyuxin的博客
09-15 2920
关于style和background两个字段，虽然一个管理状态栏的前景颜色，一个管理系统状态栏的背景色，但是这种配置权限不高，容易被pages.json内部配置覆盖，也不灵活，所以我就没有使用。在uniapp官网 全局文件 --> manifest.json应用配置--> App完整manifest.json里面，之后全局全局搜索(ctrl+f) statusbar的配置。第二，切换到代码视图，在app-plus -> statusbar 下添加immersed节点并设为false。
uni-app去除手机的状态栏(像电量、信号、时间等)
qq_43787947的博客
07-14 2642
【代码】uni-app去除手机的状态栏(像电量、信号、时间等)
解决小程序头部与状态栏、小程序胶囊重叠问题
m0_55959877的博客
02-02 615
uni.getSystemInfo uni.getMenuButtonBoundingClientRect()
uniapp顶部导航栏被遮住显示问题
红烧咸咸鱼
06-29 2555
uniapp顶部导航栏被遮住显示问题
微信小程序的页面文字和导航栏重叠怎么办
guluguluchi的博客
01-07 674
微信小程序的页面标题和导航栏重叠了该怎么办，尝试删除了"navigationStyle": "custom"和skyline的设置，但是删除后导致导航栏变成了全黑色。
uniapp开发，app手机状态栏问题挡住问题、小程序关闭过滤无依赖文件
Winsom1的博客
10-14 3686
uniapp入坑 问题解决方法
C++ Builder实现菜单栏、工具栏与状态栏详解及实例
在C++ Builder中，设计美观且易用的用户界面至关重要，其中包括菜单栏、工具栏和状态栏的构建。本章节详尽讲述了如何在Windows应用程序中有效地集成这些元素。 首先，菜单是应用程序与用户交互的重要组成部分。C++ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值