uniapp自定义顶部导航栏，计算胶囊高度

要在 UniApp 中自定义顶部导航栏并计算胶囊高度，可以使用以下步骤：

• 获取胶囊高度：使用 uni.getMenuButtonBoundingClientRect() 方法获取胶囊的高度和位置。

• 自定义导航栏：在模板中创建一个自定义的导航栏，并根据胶囊的高度进行布局。

以下是一个示例代码，展示如何实现自定义顶部导航栏并计算胶囊高度：

<template>
  <view class="navbar" :style="{ height: navbarHeight + 'px', paddingTop: paddingTop + 'px' }">
    <text class="title">自定义导航栏</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navbarHeight: 0,
      paddingTop: 0,
    };
  },
  mounted() {
    this.calculateNavbarHeight();
  },
  methods: {
    calculateNavbarHeight() {
      const menuButton = uni.getMenuButtonBoundingClientRect();
      this.navbarHeight = menuButton.height + (menuButton.top - uni.getSystemInfoSync().statusBarHeight);
      this.paddingTop = uni.getSystemInfoSync().statusBarHeight;
    },
  },
};
</script>

<style scoped>
.navbar {
  background-color: #4394f7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title {
  color: white;
  font-size: 20px;
}
</style>