需求:由于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} = res
this.globalData.bottomLift = bottomLift
})
},
// 获取设备信息
getDeviceSize: function() {
return new Promise((resolve, reject) => {
wx.getSystemInfo({
success: function(res) {
// console.log(res)
const {screenHeight, safeArea} = res
const {bottom} = safeArea
const bottomLift = screenHeight - bottom
resolve({bottomLift})
}
})
})
},
使用tabbar的页面
//js
Page({
data: {
bottomLift: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
let {bottomLift} = app.globalData
if(bottomLift>=0){
app.getDeviceSize().then(res => {
const {bottomLift} = res
this.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>
转载于:https://www.jianshu.com/p/469fc45c9157