本文主要是介绍微信小程序适配iphoneX，XR，12的底部安全区域（底部小黑条），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
问题描述：
在项目页面开发过程中，有些页面的按钮是需要固定在页面底部的（比如电商项目的确认订单页）；如果直接设置bottom:0，那么在iphonex，xr，12等机型，就会出现下面左图的问题，按钮区域距离底部太近了，用户体验就会很差，按钮也不好点击。
解决思路：
为了适配所有的手机机型，我们需要获取到底部小黑条的高度，给固定在底部的view设置padding-bottom，增加高度；（有些手机默认是没有底部这个区域的，没有的话padding-bottom就设置为0）
解决方法：
1.首先，我们需要在app.js里面，获取到底部小黑条区域的高度（小黑条区域高度=屏幕高度-安全区域的bottom值，安全区域指的是内容可见区域）：
app.js
App({globalData: {bottomLift: 0},onLaunch() {//获取当前设备信息wx.getSystemInfo({success: res => {this.globalData.bottomLift = res.screenHeight - res.safeArea.bottom;},fail(err) {console.log(err);}})}
})2.在确认订单页面进行设置：
order-confirm.wxml
<view class="fixed-bottom" style="padding-bottom:{{bottomLift}}px">//代码内容已省略
</view>order-confirm.js
const app = getApp()
Page({data: {bottomLift: app.globalData.bottomLift}
})order-confirm.wxss
.fixed-bottom{display: flex;align-items: center;font-size: 30rpx;color: #666;padding: 20rpx;border-top: 2rpx solid #ddd;background-color: #fff;width: 710rpx;position: fixed;left: 0;bottom: 0;
}这样子就可以解决上面的问题啦~
这篇关于微信小程序适配iphoneX，XR，12的底部安全区域（底部小黑条）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
