首先在app.js里配置一个全局变量
globalData:{
isIphonex:false
}
然后在onShow里面,根据微信小程序API:wx.getSystemInfo获取用户手机型号
let _self = this;
wx.getSystemInfo({
success: res =>{
let modelmes = res.model;
if(modelmes.search('iPhone X') != -1){
_self.globalData.isIphoneX = true
}
}
})
在需要适配的界面js文件onLoad里引入:
let isIphoneX =app.globalData.isIphoneX;
this.setData({
isIphoneX: isIphoneX
})
在需要适配的wxml文件里使用:
<view class="bot_btns {{isIphoneX ? 'iphonex_bottom':''}}">
最后在全局配置好样式即可:
.iphonex_bottom{
bottom: 68rpx !important;
}
.iphonex_bottom::after{
content: ' ';
position: fixed;
bottom: 0!important;
height: 68rpx!important;
width: 100%;
background: black;
}
有不明白或者表述不清楚的地方,可留言咨询吆