iphoneX兼容之自定义底部菜单

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

在你要编写的底部菜单中插入样式
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(

100

rpx

+

env(safe-area-inset-bottom))

;

}

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