11
收藏

iphoneX兼容之自定义底部菜单

当我们需要自定义底部导航栏时 首先要解决iphoneX的底部大横条对这个兼容 通常不设置兼容 都会被挡住 使用css编写即可兼容 无需编写js代码

当我们需要自定义底部导航栏时   首先要解决iphoneX的底部大横条对这个兼容   通常不设置兼容  都会被挡住

如何编写


在你要编写的底部菜单中插入   样式 padding-bottom: calc(env(safe-area-inset-bottom) / 2)   即可兼容 

 例如:css中插入

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    .fixed-wrap {
        height: calc(env(safe-area-inset-bottom) / 2);
        width: 100%;
    }
 
    .fixed-pay {
        padding-bottom: calc(env(safe-area-inset-bottom) / 2);

    }


}

其中       env(safe-area-inset-bottom)  是计算兼容的高度   通常一半即可   

        calc  是计算css   你也可以加入高度  假设有第二层 底部固定栏【即底部导航栏上面还有一层固定栏】  可如下编写  

view.footer {

    bottom: calc(100rpx + env(safe-area-inset-bottom));

}


这样轻轻松松解决兼容  不需要写js代码


<-------------大横条------------->


<-------------自定义底部示例------------->





最后一次编辑于  04-09  (未经腾讯允许,不得转载)
收藏赞 11

4 个评论

  • I ' M  H E R E
    I ' M  H E R E

    可惜老小子我都没碰过iphoneX,都不知道什么效果

    赞同 0没有帮助
    评论 2
    复制
    05-07
    • 唏嘘
      唏嘘

      你会碰到的

      赞同 0没有帮助
      回复
      复制
      05-07
    • I ' M  H E R E
      I ' M  H E R E
      回复唏嘘

      哈哈  回头借一个摸两把过过瘾

      赞同 0没有帮助
      回复
      复制
      05-07
    评论
  • 平常心
    平常心

    👍

    赞同 0没有帮助
    评论 0
    复制
    04-16
  • 花剑
    花剑

    mark一下 ,回头试试

    赞同 0没有帮助
    评论 0
    复制
    04-09
  • Wang
    Wang

    谢谢分享, 超级有用!!

    赞同 0没有帮助
    评论 1
    复制
    04-09
    • 唏嘘
      唏嘘

      哈哈哈   举手之劳   期待你的分享哦

      赞同 0没有帮助
      回复
      复制
      04-09
    评论