如果你的小程序頁(yè)面按鈕有用fixed定位到底部的話具被，那你一定會(huì)遇到兼容全面屏的坑（與底部橫條重疊）规哪。查了下文檔禁荸，發(fā)現(xiàn)能用的就只有一個(gè)api：
wx.getSystemInfoSync()wx.getSystemInfoSync()
封裝一個(gè)全局的函數(shù)
代碼如下:
app.js
onLaunch: function (e) {
? ? // 判斷設(shè)備是否為全面屏
? ? this.checkFullSucreen()
? },
globalData: {
? ? isFullSucreen: false, // 當(dāng)前設(shè)備是否為 FullSucreen
? },
checkFullSucreen: function () {
? ? const self = this
? ? wx.getSystemInfo({
? ? ? success: function (res) {
? ? ? ? console.log(res)
? ? ? ? // 根據(jù) 屏幕高度 進(jìn)行判斷
? ? ? ? if (res.screenHeight - res.windowHeight - res.statusBarHeight - 32 > 72) {
? ? ? ? ? self.globalData.isFullSucreen = true
? ? ? ? }
? ? ? }
? ? })
? },
由華為M20? M9和 iPhoneX XR? (res.statusBarHeight)的平均值得出:?
32(31.8四舍五入)則是小程序頂部title區(qū)域高度
由華為M20? M9和 iPhoneX XR? (res.screenHeight - res.windowHeight - res.statusBarHeight - 32?)的平均值得出:?
76(75.6四舍五入)則是判斷微信對(duì)應(yīng)全面屏的適配tab底部高度
在所需頁(yè)面調(diào)用
data{
isFullSucreen: app.globalData.isFullSucreen ? true : false //判斷機(jī)型
}
<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;
}
