小程序开发：iphoneX兼容之自定义底部菜单

发布时间：作者：济南小程序开发来源：未知点击:

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

如何编写

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

@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代码

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

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