zoukankan      html  css  js  c++  java
  • 小程序兼容全面屏自定义底部按钮

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

  • 相关阅读:
    for语句及switch case用法示例
    ●验证控件
    ●LinQ to SQL
    ●操作Word
    141107●VS2012的一些使用技巧
    ●Winform拖动无边框窗口、播放音频、启动外部exe程序
    ●操作文件目录及文件
    ●流
    ●事务及异常处理
    ●Winform对话框
  • 原文地址:https://www.cnblogs.com/pjl43/p/10537883.html
Copyright © 2011-2022 走看看