在自定义小程序导航栏时，右上角的胶囊（MenuButton）在不同机型测试，会发现很难适配。
实测中 不同的手机，胶囊高度不一样、状态栏高度不一样。与模拟器显示的情况是不一样的。
完全需要根据手机，动态的计算高度。
先看一些小程序顶部导航栏适配的情况
图一 某团 图二 某乎 图三 某东 图四 某拉
上图适配做的最好的是某东，但仔细看仍会有一点错位，但输入框的颜色，淡化了这种不和谐感。
为解决这个问题就要搞清楚原理
这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是 （状态栏高度 + 导航栏高度）
而状态栏高度可以通过wx.getSystemInfo(）获取，现在就只用解决导航栏高度了
观察发现，胶囊顶部高度距导航栏顶部高度的高度差 和胶囊底部高度距导航栏底部高度的高度差，是一样的
也就是说 导航栏高度 = 胶囊高度 +（高度差）x 2
而胶囊信息可以通过wx.getMenuButtonBoundingClientRect()获取，现在就只用解决高度差了
wx.getMenuButtonBoundingClientRect()中也返回了胶囊顶部距屏幕顶部距离的信息（top）
所以知 高度差 =胶囊顶部距屏幕顶部距离 -状态栏高度
用这两个API 我们可以得到如下的数据
导航栏整体高度 伪呆🐎
menu = wx.getMenuButtonBoundingClientRect()
system =wx.getSystemInfo
导航栏高度 = menu.statusBarHeight+menu.height + (menu.top -menu.statusBarHeight) * 2
到此我们就完美解决了导航栏高度的问题
而导航栏内容就是
内容标签的view高度等于menu.height并且垂直居中
效果
真机效果
最终效果
讲完了 上呆🐎
注： 一般需将自定义导航栏单独出来为组件
app.js 呆🐎
//app.jsApp({globalData: {},onLaunch: function() {//获取系统信息wx.getSystemInfo({success: res => {this.system = res}})//获取胶囊信息this.menu = wx.getMenuButtonBoundingClientRect()//打印数据console.log('系统信息', this.system)console.log('胶囊信息', this.menu)}})
组件.js呆🐎
//获取应用实例const app = getApp()Component({/*** 组件的属性列表*/properties: {//导航栏颜色navColor: {type: String,value: '#fff'}},/*** 组件的初始数据*/data: {s: app.system.statusBarHeight, //状态栏高度n: (app.menu.top - app.system.statusBarHeight) * 2 + app.menu.height, //导航栏高度h: app.menu.height //胶囊高度}})
组件.wxml 呆🐎
<cover-view class='nav_box' style='background:{{navColor}}'><cover-view style='height:{{s}}px' /><cover-view class='navBar' style='height:{{n}}px'><cover-view class='content' style='height:{{h}}px'><!-- 导航自定义内容 --><!-- 1. 插槽 可在使用页面插入所需内容 --><slot></slot><!-- 2. 选择渲染 可在js页面 设置渲染type属性 不同场景传不同值 --><block wx:if='{{type == 0}}'>导航一</block><block wx:if='{{type == 1}}'>导航二</block><block wx:else>导航三</block></cover-view></cover-view></cover-view><view style='height:{{s+n}}px' /> <!-- 注：占位用 -->
组件. wxss呆🐎
.nav_box {position: fixed;width: 100%;font-size: 15px;z-index: 999;}.navBar {display: flex;align-items: center;padding: 0 10px;}.content {width: 100%;display: flex;align-items: center;background: green;}
组件使用页面.json 呆🐎
{"navigationStyle": "custom", //设置自定义导航"usingComponents": {"navBar": "../../组件/navBar/navBar" //自己的路径}}
微信小程序自定义导航栏 胶囊菜单按钮高度完美适配 原理简单 赛过一些大厂的适配 妈妈再也不用担心我强迫症啦
