当我们需要自定义底部导航栏时 首先要解决iphoneX的底部大横条对这个兼容 通常不设置兼容 都会被挡住 使用css编写即可兼容 无需编写js代码
在你要编写的底部菜单中插入 样式 padding-bottom
: calc(env(safe-area-inset-
bottom
) /
2
) 即可兼容
例如:css中插入
|
其中 env(safe-area-inset-
bottom
) 是计算兼容的高度 通常一半即可
calc 是计算css 你也可以加入高度 假设有第二层 底部固定栏【即底部导航栏上面还有一层固定栏】 可如下编写
view.footer {
bottom: calc(100rpx + env(safe-area-inset-bottom));
}
这样轻轻松松解决兼容 不需要写js代码