微信小程序自定义状态栏的高度设置

文章2020-08-191,595 人已阅来源：网络

首选，要理解下面的这个公式：自定义导航栏的高度 = 手机状态栏高度 + 胶囊高度 + 胶囊的上下间距

然后我们通过以下分析

  1. 胶囊的上下间距是一致的。
  2. 这个间距在不同设备上是不一样的。
  3. 上间距 = 胶囊与手机状态栏的距离。
  4. 可以通过胶囊信息的 top 值减去手机状态栏的高度，从而得出胶囊的上间距。

其实最主要的还是要通过胶囊的位置信息来计算出自定义导航栏的。api详情：wx.getMenuButtonBoundingClientRec

代码示例：

// 获取设备信息
wx.getSystemInfo({
    success: e => {   // { statusBarHeight: 20, ... }，单位为 px
        // 获取右上角胶囊的位置信息
        let info = wx.getMenuButtonBoundingClientRect()  // { bottom: 58, height: 32, left: 278, right: 365, top: 26, width: 87 }，单位为 px
        let CustomBar = info.bottom + info.top - e.statusBarHeight
    }
}) 

相关内容

  • 浅谈小程序如何实现tab卡片切换功能

    小程序如何实现tab卡片切换功能？本篇文章给大家介绍一下微信小程序实现tab卡片切换的方法，希望对大家有所帮助！一、UI与交互首先我们来看看要实现的ui模样和交互效果吧，下图是...

    浅谈小程序如何实现tab卡片切换功能
  • 微信小程序的wx:for/wx:for-items/wx:for-item/wx:key等的关系及正确使用

    wx:for主要用于循环输出数组，对象等。//示例数据constcityList=[{"id":"35","provincecode":"150000","city":"广州"...

  • 微信小程序: wx:key详解

    一、代码演示未使用wk:key的源码：//<!--pages/mypage/mypage.wxml-->（wxml页面结构文件）<switchwx:for="...

  • 微信小程序适配iPhone x系列手机的方法

    微信小程序在适配iphonex的时候底部的横线会出现遮挡这时候就要处理下：获取设备型号在app.js文件中创建全局变量，然后获取设备型号globalData:{isIphone...

  • 6个最优秀的微信小程序UI组件库

    开发微信小程序的过程中，选择一款好用的组件库，可以达到事半功倍的效果。自从微信小程序面世以来，不断有一些开源组件库出来，下面6款就是排名比较靠前，用户使用量与关注度比较高的小程...

    6个最优秀的微信小程序UI组件库
  • 微信小程序10道经典面试题

    1、简单描述下微信小程序的相关文件类型？答：微信小程序项目结构主要有四个文件类型，如下：一、WXML（WeiXinMarkupLanguage）是框架设计的一套标签语言，结合基...

  • css中margin的4个属性顺序

    在CSS中，margin 属性的四个值可以按照以下两种方式来指定：按照顺时针方向依次指定上、右、下、左四个方向的外边距值。例如：margin:10px20px15px5px;/...

  • css中padding四个值的顺序

    当你使用padding属性来设置元素的内边距时，可以按照以下两种方式来指定四个值：按照顺时针方向依次指定上、右、下、左四个方向的内边距值。例如：padding:10px20px...

  • 微信手机弹幕/手持弹幕怎么弄

    有很多朋友问：手机弹幕怎么弄？在这里给大家分享一下，手机弹幕一般是小程序制作的，不用麻烦的再去下载APP。在这里给大家说一下，手机弹幕和手持弹幕其实是说的一个东西，只是叫法不同...

    微信手机弹幕/手持弹幕怎么弄
  • JS中函数(function)的定义以及几种用法

    在JavaScript中，函数（function）是一种可重复使用的代码块，用于执行特定的任务。函数可以接受参数（也称为形式参数），执行一系列的操作，并返回一个值。以下是定义函...

浏览更多有关 的内容