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

最新推荐文章于 2024-10-08 10:41:31 发布
最新推荐文章于 2024-10-08 10:41:31 发布
阅读量1.8k 收藏 1
点赞数 2
分类专栏： uniapp 文章标签： uni-app html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61945023/article/details/129836492
版权
在项目配置文件manifest.json中，为app-plus模块添加statusbar配置，将immersed设置为false，可以防止状态栏沉浸。同时设置了statusbar的样式为light和背景颜色为黑色。
摘要由CSDN通过智能技术生成

解决办法

在项目的manifest.json文件中添加statusbar模块

将immersed设为false

"app-plus" : {
        "statusbar" : {
            "immersed" : false,
            "style" : "light",
            "background" : "#000"
        },

橙緒媛
关注
专栏目录
uniapp 自定义顶部导航栏 ，以及fixed定位兼容
enjoy124的博客
05-16 928
原因：APP 和微信的原生导航栏和tabbar下，元素区域坐标是不包含原生导航栏和tabbar的。而 H5 里原生导航栏和tabbar是 div 模拟实现的，所以元素坐标会包含导航栏和tabbar的高度。1.使用uview的u-navbar自定义导航栏时，发现网页h5是正常的，但是启动模拟器app时，发现内容全部被导航栏覆盖，顶上去了，如下图。uni-app新增了2个css变量：–window-top和–window-bottom，可以直接style中使用替代top和bottom。
uniapp顶部导航栏被遮住显示问题
红烧咸咸鱼
06-29 2869
uniapp顶部导航栏被遮住显示问题
uniapp微信小程序解决上方刘海屏遮挡
zhuyuyaya的博客
02-22 2021
uniapp微信小程序解决上方刘海屏遮挡
uniapp自定义导航栏遮住了手机状态栏问题
cv1002420186的博客
04-28 1944
【代码】uniapp自定义导航栏遮住了手机状态栏问题。
uniapp自定义导航栏
weixin_45585505的博客
07-29 1193
这里说的导航栏解决的问题是手机顶部状态栏区域不被页面内容覆盖。uniapp项目，小程序都可以使用官方给的默认导航栏，处理了手机状态栏的问题。以及还有第三方的框架也做了处理。但实际开发中，默认的或者第三方给的设计也不能完全满足业务的需求，所以最好的方式就是自己写导航栏，想怎么改就怎么改。 非H5端，手机顶部的状态栏会被页面内容所覆盖，当然如果做像某音那样的短视频，则不用考虑状态栏的问题，窗体是沉浸式的。uniapp官方给了处理的方案，即css变量，–status-bar-height，小程序这个值是25px，
uniapp自定义头部导航栏
努力变好
08-04 2805
有时我们需要一些特殊的头部导航栏页面，取消传统的导航栏，来增加页面的美观度。
uniapp 自定义导航栏固定在顶部
07-27
2. 在需要显示导航栏的页面中，使用 `<view>` 或 `<div>` 标签来包裹页面内容，并为其添加一个与导航栏等高的上边距，以避免内容被导航栏遮挡住。 ```html ;"> <!-- 页面内容 --> ``` 3. 在自定义导航栏...
顶部导航栏渐变透明
06-24
1. **创建自定义头部布局**：在XML布局文件中创建一个包含顶部导航栏的布局，可以是ImageView、TextView或其他组件。 2. **监听滚动事件**：为ScrollView或NestedScrollView添加OnScrollChangeListener，监听滚动...
uniapp自定义tabbar遮挡内容
07-28
你可以尝试以下方法解决UniApp自定义TabBar遮挡内容的问题： 1. 使用fixed定位：将TabBar设置为fixed定位，这样它就不会占用页面的布局空间，不会遮挡内容。在TabBar组件的样式中添加`position: fixed; bottom: 0;`...
uniapp自定义底部tabbar固定底部 不遮挡上面的信息
08-12
- *1* *2* *3* [uniapp自定义底部导航栏以及解决切换选项卡页面闪烁问题](https://blog.csdn.net/weixin_56394400/article/details/131833455)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630",...
Uniapp开发微信小程序如何实现自定义的导航栏？
最新发布
初学者
10-08 1792
接下来就是在页面的wxml或vue模板中，手动创建一个导航栏的布局，包括返回按钮、标题、右侧按钮等内容。当然我们也可以根据自己的需求来定制布局，下面给出了一个简单的布局实现。
uniapp如何隐藏默认的页面头部导航栏，uniapp开发小程序如何隐藏默认的页面头部导航栏
小李在努力学习
07-07 1840
如何在UniApp中通过设置pages.json的navigationStyle属性为custom来隐藏默认的头部导航栏，同时提及了这种方法在原生小程序中的应用。
uniapp自定义导航栏被手机状态栏覆盖了
cv1002420186的博客
04-13 627
css
小白总结写代码遇到问题怎么办（uniapp自定义导航被滚动内容覆盖）附动图
m0_69848498的博客
04-15 722
论解决问题都怎么解决？先找问题出在哪！
uniapp自定义导航和头部
九亿宅男的梦的博客
06-14 5098
【代码】uniapp自定义导航和头部。
使用uniapp ios端padding-top会遮盖固定定位的原因
qq_36238778的博客
04-13 1129
最近在用uniapp做一个公司的移动端官网，无意间发现一个bug： 当页面设置为min-heigh： 100%时，为页面添加padding-top，再用position：fixed固定定位固定头部导航栏，发现顶部导航栏内容被遮盖，但是padding-top的白色背景还在。 解决办法：给导航栏的兄弟元素加margin-top 积累工作中的点滴，将来必成大器！ ...
uni-app底部tab挡住页面
qq_38026437的博客
10-14 4732
引入uni官方的娱乐直播app，发现这个tab居然挡住了页面最下方，用的就是uni的官方tab， 好了好久才发现，是css原因。 live_list里面有个float 浮动熟悉， 下方的view 不清除浮动 或者不多加两个view 就会一直挡住 删掉熟悉 换成盒子布局 display: flex; flex-wrap: wrap; align-items: center; 就可...
uniapp navigationStyle: custom 取消默认原生导航栏 导致页面顶部 进入状态栏区域问题
tengyuxin的博客
09-15 3190
关于style和background两个字段，虽然一个管理状态栏的前景颜色，一个管理系统状态栏的背景色，但是这种配置权限不高，容易被pages.json内部配置覆盖，也不灵活，所以我就没有使用。在uniapp官网 全局文件 --> manifest.json应用配置--> App完整manifest.json里面，之后全局全局搜索(ctrl+f) statusbar的配置。第二，切换到代码视图，在app-plus -> statusbar 下添加immersed节点并设为false。
uni-popup顶部被浏览器地址栏遮挡问题解决方案参考
2301_77940797的博客
03-20 472
近期使用uni-app创作移动端网站，当设置uni-popup弹层占满整个屏幕（100vh或者100%）时，发现在真机调试时顶部被浏览器地址栏遮挡无法正常显示，效果如下。因为导航栏也是占据浏览器高度的，当我们设置100vh或100%时会被遮挡，这时我们可以重新获取浏览器可视区域高度，将此高度赋值给弹层高度。发现了一种解决方案，供大家参考。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值