uniapp自定义导航栏与微信胶囊按钮对齐

要实现自定义导航栏与微信胶囊按钮对齐，可以按照以下步骤进行：

首先在 App.vue 中设置导航栏的高度为微信胶囊按钮的高度，即44px。可以使用 uni.getSystemInfoSync() 获取系统信息，再根据 statusBarHeight 和 menuButtonBoundingClientRect.height 计算出导航栏的高度。

<template>
<view class="navigation-bar" :style="{ height: navigationBarHeight + 'px' }">
<!-- 自定义导航栏内容 -->
</view>
</template>

<script>
export default {
data() {
return {
navigationBarHeight: 0
}
},
mounted() {
const systemInfo = uni.getSystemInfoSync()
const { statusBarHeight, menuButtonBoundingClientRect } = systemInfo
this.navigationBarHeight = statusBarHeight + menuButtonBoundingClientRect.height
}
}
</script>

<style>
.navigation-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #fff;
z-index: 999;
}
</style>
登录后复制

接下来，在页面中使用 uni.getMenuButtonBoundingClientRect() 获取微信胶囊按钮的位置信息，然后根据位置信息计算出导航栏左侧和右侧的边距。

<template>
<view class="navigation-bar" :style="{ height: navigationBarHeight + 'px', paddingLeft: paddingLeft + 'px', paddingRight: paddingRight + 'px' }">
<!-- 自定义导航栏内容 -->
</view>
</template>

<script>
export default {
data() {
return {
navigationBarHeight: 0,
paddingLeft: 0,
paddingRight: 0
}
},
mounted() {
const systemInfo = uni.getSystemInfoSync()
const { statusBarHeight, menuButtonBoundingClientRect } = systemInfo
this.navigationBarHeight = statusBarHeight + menuButtonBoundingClientRect.height
const { left, right } = uni.getMenuButtonBoundingClientRect()
this.paddingLeft = left
this.paddingRight = systemInfo.windowWidth - right
}
}
</script>

<style>
.navigation-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #fff;
z-index: 999;
}
</style>
登录后复制
通过以上步骤，就可以实现自定义导航栏与微信胶囊按钮对齐了。需要注意的是，如果页面中使用了 uni.setNavigationBarTitle() 等原生导航栏相关方法，需要自行计算出对应的边距。