①效果图如下
1.小程序端与胶囊对齐
2.APP端内容区域居中
注意：上面使用的是colorui里面的自定义导航样式。
②思路：
APP端和小程序端走不同的方法，因为小程序端要计算不同屏幕下右侧胶囊的高度。
其次最重要的要清晰App端和小程序端的计算逻辑。
然后调用api获取屏幕信息，小程序还需要单独调用获取胶囊的api。
最后写公共的封装方法，在多个页面调用。
小程序端计算方法：
1.头部整体高度 ==状态栏高度 + 导航栏高度
2.导航栏高度 == （胶囊距顶部高度-状态栏高度） *2 +胶囊高度
计算导航内容距离顶部高度= 状态栏高度/2
APP端计算方法：
2.4.计算自定义导航栏的高度=((屏幕高度-状态栏高度)/需要除的比例)
③实现代码
1、封装的公共的方法APP端和小程序端
utilsNavbarHeight(screenH, statusH, comNum, saveFloat) {const screenHeight = screenH; // 屏幕高度const statusBarHeight = statusH; // 状态栏高度var saveFloats = 2if (saveFloat != undefined) {saveFloats = saveFloat}// 计算自定义导航栏的高度const navBarHeight = ((screenHeight - statusBarHeight) / comNum).toFixed(saveFloats); // 例如除以10，可以根据实际需求进行调整return navBarHeight},WechatNavBarHeight() {//获取状态栏高度const statusBarHeight = uni.getSystemInfoSync().statusBarHeight//获取小程序胶囊信息const menu = uni.getMenuButtonBoundingClientRect()//导航栏高度 == （胶囊距顶部高度-状态栏高度） *2 +胶囊高度const navBarHeightWechat = (menu.top - statusBarHeight) * 2 + menu.height//头部整体高度 ==状态栏高度 + 导航栏高度const headerHeight = statusBarHeight + navBarHeightWechat//计算导航内容距离顶部高度= 状态栏高度/2const topHeight = statusBarHeight / 2 + 'px'return {topHeight,headerHeight}},2、使用自定义导航栏页面调用
注意：height动态绑定的是navBarHeight，整体导航栏高度
top动态邦定的是statusBarHeight，计算后的距顶部高度
//布局测试 这样就可以了，实现过程中也踩了很多坑,有什么问题评论区留言啊！
来源地址：https://blog.csdn.net/weixin_53339757/article/details/132190870
