iphoneX兼容之自定义底部菜单【微信小程序】

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