微信小程序不同机型底部安全区域问题

Posted 优小U

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序不同机型底部安全区域问题相关的知识,希望对你有一定的参考价值。

在微信小程序开发过程中,有些页面底部按钮是固定在底部的,还有如果是自定义tabbar也是需要固定在底部的,这里有两个问题:

  • 不同机型的底部安全区域不同,如有些苹果手机底部有操作栏,这部分距离需要留出来否则会遮挡内容
  • 如果底部有固定定位元素,可能会导致内容区域底部部分元素被固定元素遮挡

问题1 解决方案

利用ios新增的 env()constant() 特性即可解决,开发者不需要自己动态计算高度,只需将如下CSS代码添加至样式中:

示例代码:

.bottom-wrap 
	position: fixed;
	bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);

问题2 解决方案

内容区域设置 padding-bottom,如果底部固定定位元素的高度是 50px ,那么只需要设置css:

.content-wrap 
   padding-bottom: calc(constant(safe-area-inset-bottom) + 50px);
   padding-bottom: calc(env(safe-area-inset-bottom) + 50px);

实现效果:

以上是关于微信小程序不同机型底部安全区域问题的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序自定义导航栏兼容适配所有机型

微信小程序不同机型的兼容布局解决

小程序以及H5页面上IphoneX底部安全区域小黑条适配问题

微信小程序部分安卓机型发起 HTTPS 请求频繁出现超时问题

微信小程序,图片居中显示,适配不同机型

获取不同机型微信小程序状态栏+导航栏高度