小程序兼容全面屏自定义底部按钮

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

wx.getSystemInfoSync()

不过蛋疼的是这个api并没有提供类似安全距离这样的数据,只提供了以下可能用得到数据:

研究了下发现只能曲线救国了:

上代码:

export function $checkFullSucreen () {
    Taro.getSystemInfo()
        .then((res) => {
            if (res.screenHeight - res.windowHeight - res.statusBarHeight - 46 > 70) {
          // 处理相关逻辑 setGlobalData(
'fullScreen', true) } }) }

(上面的Taro是京东小程序的框架,这边自己封装到一个文件中导出,如果你不知道的话)

因为微信本身是对全面屏做了适配,用开发者工具可以看到小程序底部的tab高度,全面屏明显高于普通屏,这边用工具测量了iphone X的下大概是80px,又测了下iphone6及其他的,发现大概50px上下,没有超过60。

所以这边判断微信对应全面屏的适配tab底部高度应该是要起码大于60,这边考量了下取70作为判断,你也可以取75之类的。

(46则是小程序顶部title区域测出的大概高度)

根据上面的方法判断出全面屏后,可以给相应的页面增加底部padding或margin就可以了 

原文地址:https://www.cnblogs.com/pjl43/p/10537883.html