微信小程序底部适配iPhone机型
iphone新款机型底部有小黑条,这导致底部的tabBar会被遮挡,因此要做一下适配
关键: 放在 custom-tab-bar 的
attached()
中,也可放在 app.js 的onLaunch()
中
要用到这个获取用户信息的api 👉 wx.getSystemInfo
data: {
isPhoneModel: wx.getStorageSync('isPhoneModel') || false,
bottomPadding: wx.getStorageSync('bottomPadding') || 0,
}
attached(){
this.getPhoneInfo()
}
getPhoneInfo() {
// 获取设备信息
wx.setStorageSync('isPhoneModel', false)
this.setData({
isPhoneModel: false
})
wx.getSystemInfo({
success: res => {
let model = res.model;
if (/iPhone/i.test(model)) {
let bottomPadding = res.screenHeight - res.safeArea.bottom
if (bottomPadding > 0) {
bottomPadding = bottomPadding + 18 // 按需求调整高度
wx.setStorageSync('isPhoneModel', true)
wx.setStorageSync('bottomPadding', bottomPadding)
this.setData({
isPhoneModel: true,
bottomPadding: bottomPadding
})
}
}
},
fail: err => {
console.log('err', err)
}
})
}
重点
放在自定义 tabBar 的 custom-tab-bar 的index.html中
<cover-view class="tab-bar" style="padding-bottom: {{isPhoneModel ? bottomPadding : 20}}rpx;">
适配后