美文网首页
小程序全面屏底部按钮适配

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

作者: 静默思想 | 来源:发表于2019-05-29 11:45 被阅读0次

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

}

相关文章

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

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

  • SafeArea widget

    SafeArea widget是适配手机屏幕---刘海屏,底部虚拟按钮等.

  • 小程序全面屏适配

    basic.less(全局样式)中: 页面底部button组件bottomButton: 如果页面内容不限制高度,...

  • 微信小程序丨三步搞定iPhoneX全面屏顶部适配

    在小程序开发中,会涉及到机型的适配,目前小程序没有对iPhone X等异形屏有特殊的接口或字段。小程序本身的底部t...

  • 小程序之iPhone x适配

    参考小程序iPhone X 视适配 在开发小程序时,可能需要适配iphone x 的时候,你会发现底部的横线会出现...

  • iOS 关于全面屏适配的方案及UI在不同尺寸下适配方案

    iOS 关于全面屏适配的方案及UI在不同尺寸下适配方案 iOS 关于全面屏适配的方案及UI在不同尺寸下适配方案

  • 小程序带参数分享

    小程序的分享有2种触发方式: 点击小程序右上角,底部弹出菜单分享 通过按钮触发,按钮的open-type为shar...

  • Android适配之版本适配

    这篇文章用来记录学习和开发时遇到的版本适配问题,持续更新 全面屏、刘海屏的适配:Android 9 支持最新的全面...

  • Android Studio 图片适配/使用之SVG

    前言 适配可以说是Android的老大难问题了,Android厂商众多,设备碎片化严重.大屏小屏,全面屏,异形屏数...

  • 全面屏适配

    简单记录一下,预备知识来源:安卓屏幕完美适配方案——独家秘笈 先来点预备知识 屏幕尺寸(in) 手机对角线的物理尺...

网友评论

      本文标题:小程序全面屏底部按钮适配

      本文链接:https://www.haomeiwen.com/subject/yametctx.html