自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题，适配ihone x，ihone 11 和12的机型
修改前情况
修改后情况
打开项目文件 app.vue
app.vue
1.增加全局参数
globalData: {
isIphoneXup:false,//是否iphonex以及以上的版本
},
2.增加获取机型
onShow: function() {
console.log('App Show');
var that = this
// 获取设备机型
wx.getSystemInfo({
success: res=>{
console.log(res)
let model = res.model;
if (/iphone\sx/i.test(model) || (/iphone/i.test(model) && /unknown/.test(model))|| /iphone\s11/i.test(model)){
console.log("是x以上")
that.globalData.isIphoneXup = true;
}else{
console.log("不是x以上")
that.globalData.isIphoneXup = false;
}
}
})
},
3.增加全局样式，下补白
.isIPXup{
padding-bottom: 68rpx !important;
}
在需要引入的页面，如底部导航条的组件页面
mounted() {
//获取当前设备机型
this.isIphoneXup = app.globalData.isIphoneXup?app.globalData.isIphoneXup:false
// console.log(this.tabBar.list)
},
<view class="blockfixed" :class="isIphoneXup?'isIPXup':''"></view>
