iPhone x及以上的异形屏top高度为44px（或以上），非异形屏为20px。
先判断是否为异形屏，如果是，获取到底部小黑条区域的高度。在页面设置底边距padding-bottom/margin-bottom，把内容区域隔开。
小黑条区域高度=屏幕高度-安全区域的bottom值，安全区域指的是内容可见区域
注意小黑条区域的高度单位是px。
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>
