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