如果你的小程序页面按钮有用fixed定位到底部的话,那你一定会遇到兼容全面屏的坑(与底部横条重叠)。查了下文档,发现能用的就只有一个api 而已。
1.下面准备封装全局app.js方法
/**
* 判断设备是否为全面屏
*/
checkFullSucreen: function () {
const self = this
wx.getSystemInfo({
success: function (res) {
// 根据 屏幕高度 进行判断
if (res.screenHeight - res.windowHeight - res.statusBarHeight - 32 > 72) {
self.globalData.isFullSucreen = true
}
// 根据手机型号匹配
if (res.model.search('iPhone X') != -1) {
self.globalData.isFullSucreen = true
}
}
})
},
然后在onLaunch方法调用它吧
this.setData({
isFullSucreen: App.globalData.isFullSucreen, //判断机型
})
在有 fixed 定位的页面 data 中判断下
然后是两个 css 样式
.fix-Full-button {
bottom: 68rpx !important;
}
.fix-Full-button::after {
content: ' ';
position: fixed;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 68rpx !important;
width: 100%;
background: #fff;
}
最后在模板中,底栏 class 中增加一处判断就 ok
{{isFullSucreen?'fix-Full-button':''}}