微信小程序固定底栏适配全面屏

如果你的小程序页面按钮有用fixed定位到底部的话，那你一定会遇到兼容全面屏的坑（与底部横条重叠）。查了下文档，发现能用的就只有一个api 而已。

下面准备封装全局app.js方法

JavaScript

/**
     * 判断设备是否为全面屏
     */
    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方法调用它吧

在有 fixed 定位的页面 data 中判断下

JavaScript

this.setData({
    isFullSucreen: App.globalData.isFullSucreen, //判断机型
})

然后是两个 css 样式

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 中增加一处判断

<view class="flow-fixed-footer b-f m-top10 {{isFullSucreen?'fix-Full-button':''}}">