如果你的小程序页面按钮有用fixed定位到底部的话，那你一定会遇到兼容全面屏的坑（与底部横条重叠）。查了下文档，发现能用的就只有一个api：
wx.getSystemInfoSync()wx.getSystemInfoSync()
封装一个全局的函数
代码如下:
app.js
onLaunch: function (e) {
// 判断设备是否为全面屏
this.checkFullSucreen()
},
globalData: {
isFullSucreen: false, // 当前设备是否为 FullSucreen
},
checkFullSucreen: function () {
const self = this
wx.getSystemInfo({
success: function (res) {
console.log(res)
// 根据 屏幕高度 进行判断
if (res.screenHeight - res.windowHeight - res.statusBarHeight - 32 > 72) {
self.globalData.isFullSucreen = true
}
}
})
},
由华为M20 M9和 iPhoneX XR (res.statusBarHeight)的平均值得出:
32(31.8四舍五入)则是小程序顶部title区域高度
由华为M20 M9和 iPhoneX XR (res.screenHeight - res.windowHeight - res.statusBarHeight - 32 )的平均值得出:
76(75.6四舍五入)则是判断微信对应全面屏的适配tab底部高度
在所需页面调用
data{
isFullSucreen: app.globalData.isFullSucreen ? true : false //判断机型
}
<view class="bottom-btn {{isFullSucreen?'fix-Full-button':''}}"></view>
.bottom-btn {
position: fixed;
left: 0;
bottom: 0;
z-index: 1000;
width: 750rpx;
height: 100rpx;
display: flex;
background: #fff;
}
.fix-Full-button {
bottom:68rpx!important;
}
.fix-Full-button::after {
content: ' ';
position: fixed;
bottom: 0!important;
height: 68rpx!important;
width: 100%;
background: #fff;
}
