uniapp 自定义手机顶部状态栏不生效问题

最新推荐文章于 2024-05-17 19:35:06 发布
最新推荐文章于 2024-05-17 19:35:06 发布
阅读量1.3k 收藏 2
点赞数 2
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24909089/article/details/132248699
版权

 想要的效果想淘宝一样，底色覆盖到手机顶部，找了两天都没找到原因，过程很艰苦，直接上结果吧

 项目是后来接手的，最终原因出在这， "immersed" : false=>设置为 true 就可以了，沉浸式样式

 

 

天下皆白_唯我独黑
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
小程序篇 - uni-app自定义标题栏样式适配问题
weixin_41284629的博客
08-13 1480
我们自定义标题栏先要设置 navigationStyle: ‘custom’ 设置过后只会保留胶囊 其他的可以自由发挥咯 json "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "健康管理", "navigationStyle": "custom" } } ] html：页面自定义标题栏 <view class="doctor-title" :style="{m
uniapp-自定义导航栏样式不生效问题(一)
qq_45851435的博客
07-19 4726
刚接触uniapp不久，这是我踩到的最心酸的坑T^T 1.我设置了一个自定义组件，用作导航栏，结果出bug了，如下图： 2.首先，h5端是完全没有问题的，可以正常显示，就是微信开发者工具排版错乱了 3.上百度排查了好久，为什么“uniapp自定义导航栏样式不生效”，“uniapp自定义导航栏需要注意什么” 重心都是在“自定义导航栏”上，结果做了很多无用功。 有一天改样式把 id 改成 class ，它奇迹般的可以了！！！ 下面是在微信小程序性正常显示状态 再次上网搜原因发现，微信小程序对于组件设置id
uniapp 自定义导航栏和右上角胶囊按钮对齐
最新发布
weixin_39579031的博客
05-17 332
如下图，红色区域为statusBar的区域，绿色区域为胶囊按钮的区域，胶囊按钮的区域包含灰色的按钮以及上下的padding空白，因此计算整个绿色区域的高度的公式应为：（蓝色线的高度（即胶囊按钮的top的值）- 红色状态栏区域的底statusBarHeight）* 2 + 胶囊按钮的height的值。自定义导航栏和右上角胶囊按钮对齐，需要分俩步走，一个是在上面搞个填充区用来填充刘海区域即statusBar, 然后计算出来胶囊区域的高度，让我们自己的导航栏内容高度一致，再css居中。
【uniapp】小程序开发6：自定义状态栏
不积跬步无以至千里，不积小流无以成江海。一个喜欢学习分享的程序员
10-08 737
可以设置某个页面的状态栏自定义或者全局状态栏自定义。因每台手机的顶部预留高度不一样，需要通过方法uni.getSystemInfoSync()获取顶部安全区域高度，然后通过样式预留出来。
uni自定义状态栏 (小程序和app端)
m0_70632740的博客
03-12 189
uni自定义导航栏
uni-app自定义组件不显示问题
zhanglei892721的博客
03-01 4440
初学uni-app，在components》select-grid目录下原先有一个select-grid.vue组件文件，本想着修改一下代码作为第二个组件，就在原目录复制粘贴了一份改了文件名，结果怎么引都无法显示。 最后以修改后都文件名在components下新建了另一个目录，把对应文件移到里面，引用，显示ok。 ...
uni-app导航栏和状态栏配置(时间,电池状态,信号)
织网的博客
08-21 5792
uni-app导航栏和状态栏配置 1. 导航栏 原生导航优点 ① 原生导航的体验更好，渲染新页面时，原生导航栏的渲染无需等待新页面dom加载，可以在新页面进入动画开始时就渲染。 ② 原生导航还可以避免滚动条通顶，并方便的控制原生下拉刷新。通过pages.json的配置，可以简单的、跨端的、高性能的开发业务。 原生导航缺点：原生导航栏的扩展能力有限的。尤其是微信下，没有提供太多导航栏的配置。 1.1 原生导航栏—通用配置 uni-app 自带原生导航栏，在pages.json里配置。参考官网uni-ap
Android隐藏顶部状态栏所遇到的问题
09-01
总之，隐藏Android顶部状态栏虽然看似简单，但其中涉及到的主题、窗口特性和继承关系等细节问题需要开发者仔细处理。通过了解这些知识点，可以更好地应对实际开发中的挑战，提高应用的用户体验。在遇到问题时，查阅...
详解在iOS App中自定义和隐藏状态栏的方法
09-02
在iOS应用开发中，状态栏（StatusBar）是屏幕顶部显示时间、网络状态、电量等信息的区域。在某些情况下，开发者可能需要自定义或隐藏状态栏以满足特定的设计需求。本文将详细介绍如何在iOS App中实现这些功能，特别...
Android沉浸式状态栏实现示例
08-31
状态栏通常是指屏幕顶部显示时间、网络连接等信息的区域，而沉浸式状态栏则是指状态栏与应用内容同色，仿佛融为一体。 在Android 4.4（KitKat）版本中，系统开始支持透明状态栏，但实现方式与后来的版本有所不同。...
解决vue页面DOM操作不生效的问题
08-27
下面小编就为大家分享一篇解决vue页面DOM操作不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Android 接口setComponentEnabledSetting不生效问题.pdf
08-16
在通过接口setComponentEnabledSetting，设置android组件可用或者不可用的时候，如果刚刚设置完成后，立即交流看关机，发现开机后本次设置并没有被保存。本文详细的分析了这个问题。
前端uniapp小程序设置了“navigationStyle“: “custom“，获取每个手机顶部状态栏高度
FUFCY的博客
03-23 3335
更改·后的代码 <view :style="{height:statusBarHeight+'px'}" class="status"></view> onLoad(){ this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight console.log(this.statusBarHeight,'-') // this....
uniapp适配手机状态栏高度
HHeei的博客
09-03 476
【代码】uniapp适配手机状态栏高度。
uniapp 微信小程序导航栏不起作用
Laladoge的博客
03-04 4219
uni-app导航只需要在pages.json里面修改app-plus { "path": "pages/index/index", "style": { "app-plus":{ "scrollIndicator":"none", "titleNView":{ "searchInput":{ "align":"center...
uni-app导航栏和状态栏配置
qq_41113498的博客
06-04 2461
1. 导航栏 原生导航优点 ① 原生导航的体验更好，渲染新页面时，原生导航栏的渲染无需等待新页面dom加载，可以在新页面进入动画开始时就渲染。 ② 原生导航还可以避免滚动条通顶，并方便的控制原生下拉刷新。通过pages.json的配置，可以简单的、跨端的、高性能的开发业务。 原生导航缺点：原生导航栏的扩展能力有限的。尤其是微信下，没有提供太多导航栏的配置。 1.1 原生导航栏—通用配置 uni-app 自带原生导航栏，在pages.json里配置。参考官网uni-app导航栏开发
uni-app 自定义导航栏
BradenHan的专栏
08-25 8229
在 uni-app 中，可以通过修改页面的导航栏配置来实现自定义导航栏的效果。以下是实现自定义导航栏的一般步骤：在 uni-app 项目中找到需要自定义导航栏的页面，例如 。在该页面的 标签中，添加一个自定义的导航栏组件，例如 。在 标签中，定义 组件，并在其中添加必要的属性和方法。可以使用 和其他基本组件来构建导航栏的布局。在 或 生命周期钩子中，通过 方法设置导航栏的标题。您可以从页面数据或组件的属性中获取标题信息。如果需要隐藏系统原生导航栏，可以通过 方法进行隐藏。请注意，这可能会导致
uniapp小程序 设置自定义导航栏
热门推荐
Start2019
11-24 1万+
设置自定义导航栏，并带返回按钮
UNIAPP自定义底部tabbar不生效
06-09
要在UNIAPP中自定义底部tabbar，需要在pages.json文件中进行相应配置。请确保你已经在pages.json文件中正确配置了tabBar选项并指定了自定义的tabBar组件路径。另外，还需要注意自定义tabBar组件的布局和样式。 如果你已经按照上述步骤进行了配置，但自定义tabBar仍然不生效，可能是因为你的代码中存在其他错误或冲突，可以检查一下控制台是否有报错信息。此外，还可以尝试重新编译应用程序或清除缓存等操作。如果问题仍然存在，可以提供更多细节或代码片段，以便更好地解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值