自定义navbar为了美观需要与小程序自带的胶囊对齐，胶囊相关的参数可以使用**getMenuButtonBoundingClientRect 处理。**

主要思路是获取到胶囊与顶部的距离，然后减去状态栏的高度，就可以得到胶囊与状态栏之间的间距，那么只要使底部的间距等于上面得到的间距再加上胶囊的高度就是navBar的高度，所以整个头部的高度就是,navbar高度加上状态栏高度。这样有一个局限性，就是上面的输入框高度就限定了，如果大于胶囊的高度，依然会不协调，暂时没有想到其他有效的办法解决这种局限。

const handleBarHeight = async () => {
  const { statusBarHeight, windowHeight } = await uni.getSystemInfo();
  const { top, height } = await uni.getMenuButtonBoundingClientRect();
  // 状态栏与胶囊的间距
  const gap = top - statusBarHeight;
  // 整个状态栏高度
  const barHeight = top + height + gap;
};

<van-nav-bar :border="false" :custom-style="`height: calc(${barHeight}px - ${statusBarHeight}px);padding-top:${statusBarHeight}px`">
        <template #left>
          <slot name="headLeft"></slot>
        </template>
        <template #title>
          <slot name="headTitle"></slot>
        </template>
        <template #right>
          <slot name="headRight"></slot>
        </template>
  </van-nav-bar>