原因:
微信小程序在适配华为 的时候 底部的虚拟键会出现遮挡如图:
解决方案:
步骤一:在app.js文件中 创建全局变量,然后获取设备型号
globalData: {
isHuaWei: false,
},
onShow:function(){
let that = this;
wx.getSystemInfo({
success: res=>{
// console.log('手机信息res'+res.model)
let brand= res.brand;
if (brand.search('HUAWEI') != -1) {
that.globalData.isHuaWei = true
}
}
})
},
获取的手机机型如图:
步骤二: 在需要引用的页面js文件中onload方法里获取全局变量
let isHuaWei= getApp();.globalData.isIphoneX;
this.setData({
isHuaWei: isHuaWei
})
步骤三:在 wxml文件中 进行css的逻辑判断
<view class="{{isHuaWei?'isHuaWei':''}}"> </wiew>
步骤四:在 wxss文件中 进行css,修改自己需要的css样式即可
.isHuaWei{
padding-bottom: 30rpx !important;
}