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

最新推荐文章于 2024-08-07 22:38:02 发布

weixin_30325071

最新推荐文章于 2024-08-07 22:38:02 发布

阅读量1k

点赞数

原文链接：http://www.cnblogs.com/pjl43/p/10537883.html

版权

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