uniapp小程序顶部对齐胶囊

在uniapp框架开发中，要实现顶部对齐胶囊的效果，可以通过以下步骤来实现：

1. 在index.vue文件中，使用自定义导航栏布局，并设置胶囊对齐的样式。可以参考以下代码：

<template>
  <view class="bg">
    <view class="title" :style="'padding-top:' + titleHeight + 'px'">新华的湖</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      titleHeight: 0
    }
  },
  onLoad() {
    // 获取微信右上角胶囊高度
    this.getHeight();
  },
  methods: {
    getHeight() {
      let res = wx.getMenuButtonBoundingClientRect();
      this.titleHeight = res.top;
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  font-weight: 600;
  line-height: 30px;
  margin-left: 40rpx;
  font-size: 17px;
}
</style>

2. 在pages.json文件中，设置页面的导航栏样式为custom，并禁用标题视图。可以参考以下代码：

"pages": \[
  {
    "path": "pages/index/index",
    "style": {
      "navigationStyle": "custom",
      "app-plus": {
        "titleView": false
      }
    }
  },
  ...
\]

通过以上步骤，你可以实现uniapp小程序顶部对齐胶囊的效果。\[1\]\[2\]\[3\]
#### 引用[.reference_title]
- *1* [uniapp搜索框适配小程序对齐胶囊](https://blog.csdn.net/weixin_45788691/article/details/121679738)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [uniapp小程序获取胶囊按钮高度自定义顶部标题栏](https://blog.csdn.net/DDDHL_/article/details/124046528)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]