微信小程序适配iphonex iphone11底部tabbar

本文主要是介绍微信小程序适配iphonex iphone11底部tabbar，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求：由于iphonex及之后的机型底部有一根横线，导致tabbar比原来提升了一段高度。根据底部tabbar提升的高度，计算出页面需要在底部给整个tabbar留出的位置高度。
PS：微信开发者工具iphonex与实际真机测试效果不同，底部并没有底部提升。

iphone11截图
app.js调用 wx.getSystemInfo接口获取页面信息，判断底部提升高度。
官网文档：获取系统信息

如图所示
在这里插入图片描述

底部提升的高度 = screenHeight - safeArea.bottom
tabbar为固定高度57px
app.js

  globalData: {bottomLift: 0,},onLaunch: function(options) {this.getDeviceSize().then(res => {const {bottomLift} = resthis.globalData.bottomLift = bottomLift})},// 获取设备信息getDeviceSize: function() {return new Promise((resolve, reject) => {wx.getSystemInfo({success: function(res) {// console.log(res)const {screenHeight, safeArea} = resconst {bottom} = safeAreaconst bottomLift = screenHeight - bottomresolve({bottomLift})}})})},

使用tabbar的页面

//js
Page({data: {bottomLift: 0,},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {let {bottomLift} = app.globalDataif(bottomLift>=0){app.getDeviceSize().then(res => {const {bottomLift} = resthis.setData({bottomLift})})}else{this.setData({bottomLift})}}
})
//wxss
.wrap{ min-height: calc(100vh - 57px); box-sizing: border-box;
}
//wxml
<view class='wrap' style="padding-bottom: {{57 + bottomLift}}px">//页面底部留出高度 = tabbar高度 + 提升高度...
</view>