小程序全面屏底部按钮适配

如果你的小程序页面按钮有用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;

}