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就可以了 

  • 相关阅读:
    云计算openstack核心组件——neutron网络服务(9)
    云计算openstack核心组件——neutron网络服务(8)
    flexible.js 布局详解
    libflexible源码阅读
    H5适配方案
    微信分享朋友圈示例代码
    微信接口示例代码
    微信JSSDK上传图片,代码为上传单张图
    H5动画开发快车道
    Centos 6.5 安装 Nginx+MySQL+PHP
  • 原文地址:https://www.cnblogs.com/pjl43/p/10537883.html
Copyright © 2011-2022 走看看