iphone x及以上的异形屏top高度为44px（或以上），非异形屏为20px。
先判断是否为异形屏，如果是，获取到底部小黑条区域的高度。在页面设置底边距padding-bottom/margin-bottom，把内容区域隔开。
小黑条区域高度=屏幕高度-安全区域的bottom值，安全区域指的是内容可见区域文章来源：https://www.toymoban.com/news/detail-838418.html
注意小黑条区域的高度单位是px。文章来源地址https://www.toymoban.com/news/detail-838418.html
1. 在全局app.js里，全局存储一个数据
App({
globalData: {
bottomLift: 0 //苹果X及以上的底部小黑条高度
},
onLaunch: function () {
//获取当前设备信息
wx.getSystemInfo({
success: res => {
// 苹果X及以上的底部安全区域
if (res.safeArea.top > 20) {
this.globalData.bottomLift = res.screenHeight - res.safeArea.bottom;
}
},
fail:err => {
console.log(err);
}
})
},
onShow: function () {
},
});2.在所需页面的js文件获取全局变量
const app = getApp()
Page({
data: {
bottomLift: app.globalData.bottomLift, //苹果X及以上机型的底部安全区域高度
},
})3.在所需页面的wxml里面使用
<view class="page" style="padding-bottom:{{bottomHeight}}px"></view>到了这里，关于微信小程序适配iphoneX，XR，12及以上，获取底部安全区域的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
