当我们需要自定义底部导航栏时 首先要解决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代码
<-------------大横条------------->
mark一下 ,回头试试
已解决,可以参考下:https://blog.csdn.net/qq_42354773/article/details/81018615,亲测真机有效,模拟器无效。
请问你的 底部 Bar 那么好看,请问是官方的 组件吗? 还是你自己写的?
引用别的UI插件的 不是自己写的
可否透露一下 引用的哪里啊,我也想引用
ColorUi 2.0 里面的操作条
感谢,感谢
可惜老小子我都没碰过iphoneX,都不知道什么效果
你会碰到的
哈哈 回头借一个摸两把过过瘾
👍
谢谢分享, 超级有用!!
哈哈哈 举手之劳 期待你的分享哦