【微信小程序】计算状态栏（statusBar）、导航栏（navBar）、底部安全区域高度，并设置自定义导航栏内容垂直居中

❗❗❗此计算方法仅适用于navigationStyle设置为custom时
模拟器上显示的效果可能和真机不同，以真机为准
以下API获取的数值的单位都是像素（px），并非rpx

页面划分

• 状态栏（statusBar）
  • 不同设备的状态栏的高度是不同改的
• 导航栏（navBar）
  • 导航栏高度 = 胶囊高度 + 胶囊的上下边距
  • 胶囊的上下边距相等
  • 通过wx.getMenuButtonBoundingClientRect()可以获取胶囊的宽高等信息
• 安全区域（safeArea）
  • 指的是内容区域 + 导航栏
  • 通过wx.getWindowInfo()获取安全区域的宽高等信息

获得各区域的高度

• 状态栏（statusBar）

  const statusBarHeight = wx.getWindowInfo().statusBarHeight;
  

• 导航栏（navBar）
  • 首先计算胶囊上边距，乘2，加上胶囊高度就是导航栏高度

  const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
  /*
  	{
  		width: 87,  胶囊的宽度
  		height: 32, 胶囊的高度
  		top: 48,    胶囊左上角到状态栏顶边的垂直距离（E点到AB边的垂直距离）
  		bottom: 80, 胶囊左下角到状态栏顶边的垂直距离（G点到AB边的垂直距离）
  		left: 281,
  		right: 368,
  	}
  */
  

  • 胶囊的上边距等于menuButtonInfo.top - statusBarHeight
  • 所以导航栏的高度等于const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2
• 安全区域（safeArea）和内容区
  • 安全区域包含了导航栏，所以安全区域高度 - 导航栏高度就是内容区的高度

  const { safeArea } = wx.getWindowInfo();
  /*
  	{
  		width: 375,
  		height: 734,
  		top: 44,
  		bottom: 778,
  		left: 0,
  		right: 375
  	}
  */
  const safeAreaHeight = safeArea.height; // 安全区域高度
  const contentHeight = safeAreaHeight - navBarHeight;
  

完整代码

效果图

index.json

{
  "usingComponents": {},
  "navigationStyle": "custom"
}

index.wxml

<view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
<view class="nav-bar" style="height: {{navBarHeight}}px;"></view>

<!-- <view class="safe" style="height: {{safeHeight}}px;"></view> -->
<view class="content" style="height: {{safeHeight - navBarHeight}}px"></view>

<view class="bottom-safe" style="height: {{bottomSafeHeight}}px;"></view>

index.wxss

page {
  background-color: red;
}

view {
  width: 100%;
}

.status-bar {
  background-color: rgb(55, 150, 187);
}

.nav-bar {
  background-color: bisque;
}

.safe {
  background-color: burlywood;
}

.content {
  background-color: rgb(243, 86, 222);
}

.bottom-safe {
  background-color: rgb(59, 112, 209);
}

index.js

Page({
  data: {
    statusBarHeight: 0,
    navBarHeight: 0,
    safeHeight: 0,
    bottomSafeHeight: 0,
  },
  onLoad() {
    // 获取的数值单位是px
    const windowInfo = wx.getWindowInfo();
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    console.log(windowInfo);
    console.log(menuButtonInfo);

    let statusBarHeight = windowInfo.statusBarHeight;
    let navBarHeight =
      menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;
    let safeHeight = windowInfo.safeArea.height;
    let bottomSafeHeight =
      windowInfo.screenHeight - windowInfo.safeArea.height - statusBarHeight;
    this.setData({
      statusBarHeight,
      navBarHeight,
      safeHeight,
      bottomSafeHeight,
    });
    console.log("statusBarHeight", statusBarHeight);
    console.log("navBarHeight", navBarHeight);
    console.log("safeHeight", safeHeight);
    console.log("bottomSafeHeight", bottomSafeHeight);
  },
});