1. 导航栏计算：
导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度）*2
navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
2. 获取胶囊信息
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
3.底部小黑条高度：使用wx.getSystemInfoSync()中的screenHeight和safeArea对象的bottom属性判断
需要适配的机型，使用safeArea中的bottom，得到安全区域底部纵坐标，然后使用screenHeight减去bottom就能得到小黑条的高度
//获取小黑条高度this.globalData.botomLHeight = res.screenHeight-res.safeArea.bottom; //获取数据bottomLHeight: app.globalData.botomLHeight,//底部黑条距离//结构 页面底部加<view class="blacklHeight" style="height: {{bottomLHeight}}px;"></view>
4.具体代码
wx.getSystemInfo({success: res => {this.globalData.height = res.statusBarHeight;// 状态栏高度let statusBarHeight = res.statusBarHeight; // 获取胶囊信息let menuButtonObject = wx.getMenuButtonBoundingClientRect();//console.log(menuButtonObject)let navTop = menuButtonObject.top,//胶囊距离顶部距离navObjWid = res.windowWidth - menuButtonObject.right + menuButtonObject.width, // 胶囊按钮与右侧的距离 = windowWidth - right+胶囊宽度navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;this.globalData.navHeight = navHeight; //导航栏总体高度this.globalData.navTop = navTop; //胶囊距离顶部距离this.globalData.navObj = menuButtonObject.height; //胶囊高度this.globalData.navObjWid = navObjWid; //胶囊宽度(包括右边距离)// 底部小黑条高度this.globalData.botomLHeight = res.screenHeight-res.safeArea.bottom; }})
拿到数据
navHeight: app.globalData.navHeight, //导航栏高度navTop: app.globalData.navTop, //导航栏距顶部距离navObj: app.globalData.navObj, //胶囊的高度navObjWid: app.globalData.navObjWid, //胶囊宽度+距右距离
结构布局
<view class='nav-wrap' style='height: {{navHeight}}px;' ><view class='nav-title' style='height:{{navObj}}px;margin-top:{{navTop}}px;line-height:{{navObj}}px;'>{{navbarData.title}}</view><view style='display: flex; justify-content: space-around;flex-direction: column'><!-- // 导航栏 左上角的返回按钮 和home按钮 --><view class='nav-capsule' style='height: {{navObj}}px;margin-top:{{navTop}}px;'><!-- //从分享进入小程序时 返回上一级按钮不应该存在 --><view bindtap='_navback' wx:if='{{!share}}'><van-icon name="arrow-left" /></view></view> </view></view>
样式代码
/* 顶部要固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */.nav-wrap {position: fixed;width: 100%;top: 0;background: #fff;color: #000;z-index: 9999999;}/* 标题要居中 */.nav-title {position: absolute;text-align: center;max-width: 400rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;top: 0;left: 0;right: 0;bottom: 0;margin: auto;color: #000;font-size: 30rpx;font-weight: 500;}.nav-capsule {display: flex;align-items: center;margin-left: 30rpx;width: 140rpx;justify-content: space-between;height: 100%;}.navbar-v-line {width: 1px;height: 32rpx;background-color: #e5e5e5;}.back-pre, .back-home {width: 50rpx;height: 50rpx;margin-top: 4rpx;padding: 10rpx;}.nav-capsule .back-home {width: 36rpx;height: 40rpx;margin-top: 3rpx;}.userinfo-avatar {overflow: hidden;width: 58rpx;height: 58rpx;margin: 2rpx;border-radius: 50%;}
注：如果使用后页面出现滚动轴可加如下代码：
wxml最外层：
<viewclass="SetTopNavContainer"style="max-height:100vh;overflow-y:auto;"></view>
