h***@163.com
h***@163.com
  • 发布:2022-08-23 15:50
  • 更新:2022-08-24 19:51
  • 阅读:545

能否关闭h5沉浸导航栏

分类:uni-app

有个需求是用uniapp开发h5发布成手机网页使用,但是在开发过程中,iOS用wkwebView打开发现状态栏也会被占用,查询资料得知因为沉浸式导航栏的原因。开发过程中选择了uni-nav-bar 作为导航栏,在vue2中statusBar="false" 不起作用,uni.getSystemInfoSync().statusBarHeight也为0.但是在vue3中是偶尔为0。所以导致导航栏一致有问题,请教能否有解决办法。

2022-08-23 15:50 负责人:无 分享
已邀请:
CODE_XU

CODE_XU

使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部

  • h***@163.com (作者)

    这个css我看h5不支持嘛

    2022-08-24 11:54

  • CODE_XU

    回复 h***@163.com: 这个要在APP 端做限制,H5 不存在原生导航栏和 tabbar

    2022-08-24 12:03

  • h***@163.com (作者)

    回复 CODE_XU: 使用iOS原生导航栏,内容也会往上移动,导致导航栏挡住一部分内容。您说的是什么意思,不是特别明白

    2022-08-24 13:50

  • CODE_XU

    回复 h***@163.com:方便提供一个可以复现的 demo 吗?

    2022-08-24 14:08

  • h***@163.com (作者)

    回复 CODE_XU: 您好,demo我已经发送了在这个问答的下一条

    2022-08-24 19:49

h***@163.com

h***@163.com (作者)

您好demo已发送,我是这样用的,在iOS工程中使用一个wkwebView,wkwebview放到一个控制器里,占满屏幕,导航栏隐藏,使用uniapp的uni-nav-bar。在使用中,一直显示有问题。感谢您的回复

  • CODE_XU

    H5 无法获取到系统状态栏高度,你应该尝试在iOS工程里去计算wkwebView高度,保留系统状态栏的位置

    2022-08-25 10:13

  • h***@163.com (作者)

    回复 CODE_XU: 现在通过js交互,将高度传递给h5了,只是希望有更好的解决办法

    2022-08-25 12:23

该问题目前已经被锁定, 无法添加新回复