问题描述

在微信小程序开发过程中，有些页面的按钮是需要固定在页面底部（如电商详情页中的加入购物车按钮等），如果将底部栏样式直接设置为bottom：0;，那么在iPhone X、iPhone XR、iPhone 12等机型中，就会出现下图所示问题：按钮区域距离底部太近，可点击区域缩小，用户体验感差。

问题复现

解决方案

方案一（最快速）

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

示例代码：

<!-- 底部栏 -->
<view class="bottom"></view>

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

方案二（动态计算）

<!-- 底部栏 -->
<view class="bottom" style="padding-bottom:{{bottomPadding}}px"></view>

async onLoad() {const res = await wx.getSystemInfo({})const bottomPadding = res.screenHeight - res.safeArea.bottomthis.setData({bottomPadding})
}

.bottom {position: fixed;bottom: 0;
}

微信小程序安全区域适配问题相关推荐

7.微信小程序（布局适配与物理逻辑像素）
微信小程序(布局适配与物理逻辑像素) 前言移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等,本节来详细介绍下关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP. ...
微信小程序全面屏适配
开发微信小程序中,遇到iPhone全面屏手机,底部小黑条会遮挡页面底部,因此需要做适配处理. 解决方案:使用wx.getSystemInfoSync()中的screenHeight和safeArea对 ...
微信小程序iphone x适配
微信小程序在适配iphone x 的时候底部的横线会出现遮挡这时候就要处理下: 在app.js文件中创建全局变量,然后获取设备型号 globalData: {isIphoneX: false,us ...
微信小程序（布局适配与物理逻辑像素）
移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP.像素密度PPI.像素比DPR.视网膜显示屏Retina.rpx ...
微信小程序（布局适配与物理逻辑像素）
前言移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等,本节来详细介绍下关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP.像素密度PPI.像素比DPR.视网膜显 ...
微信小程序全面屏适配
最近在做小程序,说实话小程序的坑我才刚踩.今天做了一个关于小程序自定义navigator的功能,不废话,先上图通过配置app.json的window属性的navigationStyle(导航栏样式, ...
html5苹果x底部满屏,iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配...
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 前言在苹果 iPho ...
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 本文目录前言 ...
[微信小程序]适配各个不同机型屏幕
微信小程序该如何适配各个机型屏幕我们知道在原始设备中, iOS有pt,安卓有dp(密度无关像素), 但是无论在原生开发语言还是在React-native中, 我们处理屏幕适配, 都可以采用动态获取当 ...

微信小程序安全区域适配问题