首先,我们需要判断手机是否是IphoneX手机:wx.getSystemInfo
//查看手机是否是IphoneX
wx.getSystemInfo({
success: function (res) {
console.log(res)
let model = res.model.substring(0, res.model.indexOf("X")) + "X"
if (model == 'iPhone X') {
that.globalData.isIphoneX = true
}
}
})
全局定义一个变量isIphoneX,通过此值是否为true,显示或是隐藏,底部的 空白区域;
<view class="button-group {{isIphoneX ?'fix-iphonex-button':''}}"></view>
样式代码:
.fix-iphonex-button {
bottom:68rpx!important;
width:100vw;
}
.fix-iphonex-button::after {
content: ' ';
position: fixed;
bottom: 0!important;
height: 68rpx!important;
width: 100%;
background: #fff;
}
这样就可以在IphoneX手机的底部增加68rpx的空白区域。