隐藏钉钉导航栏

最新推荐文章于 2024-08-16 09:51:13 发布

s先生的d小姐

最新推荐文章于 2024-08-16 09:51:13 发布

阅读量2.8k

点赞数 1

分类专栏：钉钉H5 文章标签： ios html5

本文链接：https://blog.csdn.net/weixin_44326389/article/details/118755656

版权

钉钉H5 专栏收录该内容

6 篇文章 4 订阅

订阅专栏

本文探讨了在钉钉内嵌H5应用中隐藏原生导航栏带来的适配问题，主要涉及iOS设备的安全区域填充和内容遮挡。解决方案包括使用`viewport-fit=cover`和安全样式来填充头部，以及针对内容被遮挡的处理方法。同时，文章提供了相应的代码示例。

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

备注：在钉钉内嵌h5应用中，不推荐隐藏钉钉导航栏，因为会引起其他很多手机适配问题。

一、需求说明
1.设计图中的导航栏涉及图标、下拉框等功能，因此，同事商议隐藏掉钉钉的导航栏，改用自己的导航栏。
2.每个页面的导航栏需要设置固定在头部。
二、出现的问题
1.安全适配：ios手机头部，没有填充满，出现摄像头两旁展示了上划的内容；
2.ios中固定了头部以后，每个页面的内容会上调导航栏高度，使导航栏遮住了部分内容。
二、代码
1.隐藏掉钉钉导航栏

import * as dd from "dingtalk-jsapi";
hideNavBar() {
      if (dd.env.platform != "notInDingTalk") {
        dd.biz.navigation.hideBar({
          hidden:true, // true：隐藏，false：显示
        });
      }
 },

2.设置导航栏在ios中能填充满头部
<1>index.html中的meta标签添加 viewport-fit=cover

iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：
contain: 可视窗口完全包含网页内容
cover：网页内容完全覆盖可视窗口
auto：默认值，跟 contain 表现一致

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover">

<2>给ios的头部添加安全样式

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离

如果想要填充底部可以考虑下边的内容
如果遇到旋转屏可以考虑用min()和max()

/* 适配顶部填充*/
@supports (top: env(safe-area-inset-top)){
  body,
  .header{
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
  }
}
/* 判断将 footer 的 padding-bottom 填充到最底部 */
@supports (bottom: env(safe-area-inset-bottom)){
    body,
    .footer{
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}
//max()-适配旋转屏
@supports(padding: max(0px)) {
    .post {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

3.如果使用了定位，添加了上边的内容，依旧会出现导航栏遮挡内容。可以给每个页面在内容最上方添加一个同导航栏等高的盒子，当ios的时候展示。