评论

iphoneX兼容之自定义底部菜单

2019-04-08
7265浏览
6评论

当我们需要自定义底部导航栏时 首先要解决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代码


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







最后一次编辑于  2019-05-28  
点赞 16
收藏
评论

6 个评论

  • 花剑
    花剑
    2019-04-09

    mark一下 ，回头试试

    2019-04-09
    赞同 1
    回复
  • 安逸
    安逸
    2019-09-11

    已解决，可以参考下：https://blog.csdn.net/qq_42354773/article/details/81018615，亲测真机有效，模拟器无效。

    2019-09-11
    赞同
    回复
  • 小里飞龙
    小里飞龙
    2019-05-27

    请问你的 底部 Bar 那么好看，请问是官方的 组件吗？ 还是你自己写的？

    2019-05-27
    赞同
    回复 4
    • 唏嘘
      唏嘘
      2019-05-28

      引用别的UI插件的  不是自己写的

      2019-05-28
      赞
      回复
    • 小里飞龙
      小里飞龙
      2019-05-28回复唏嘘

      可否透露一下 引用的哪里啊，我也想引用

      2019-05-28
      赞
      回复
    • 唏嘘
      唏嘘
      2019-05-28回复小里飞龙

      ColorUi  2.0  里面的操作条


      2019-05-28
      赞 1
      回复
    • 小里飞龙
      小里飞龙
      2019-05-28回复唏嘘

      感谢，感谢

      2019-05-28
      赞
      回复
  • Moonlight
    Moonlight
    2019-05-07

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

    2019-05-07
    赞同
    回复 2
    • 唏嘘
      唏嘘
      2019-05-07

      你会碰到的

      2019-05-07
      赞
      回复
    • Moonlight
      Moonlight
      2019-05-07回复唏嘘

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

      2019-05-07
      赞
      回复
  • 平常心
    平常心
    2019-04-16

    👍

    2019-04-16
    赞同
    回复
  • Wang🇨🇳
    Wang🇨🇳
    2019-04-09

    谢谢分享， 超级有用！！

    2019-04-09
    赞同
    回复 1
    • 唏嘘
      唏嘘
      2019-04-09

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

      2019-04-09
      赞
      回复
请 登录 后发表内容
作者介绍

文章标签
自定义底部菜单iphoneX兼容