需求：由于iphonex及之后的機型底部有一根橫線砂客，導致tabbar比原來提升了一段高度。根據(jù)底部tabbar提升的高度狐史，計算出頁面需要在底部給整個tabbar留出的位置高度唆香。
PS：微信開發(fā)者工具iphonex與實際真機測試效果不同虐块，底部并沒有底部提升。
iphone11截圖
app.js調(diào)用 wx.getSystemInfo接口獲取頁面信息徒爹，判斷底部提升高度荚醒。
官網(wǎng)文檔：獲取系統(tǒng)信息
如圖所示
- 底部提升的高度 = 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,
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
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>
