wanghexu
wanghexu
  • 发布:2021-02-21 10:07
  • 更新:2021-02-21 10:07
  • 阅读:72

自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题,适配ihone x,ihone 11 和12的机型

分类:uni-app

自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题,适配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)
},

0 关注 分享

要回复文章请先登录注册