uniapp顶部胶囊

uniapp顶部胶囊是指微信小程序右上角的胶囊按钮，它包含了一些功能按钮，比如返回按钮、菜单按钮等。在uniapp开发中，我们可以使用微信小程序提供的wx.getMenuButtonBoundingClientRect()方法来获取顶部胶囊的位置信息，从而实现对顶部导航栏样式的自定义。

为了统一样式，我们可以使用一个函数来获取胶囊的高度，并将其赋值给顶部导航栏的padding值。具体的代码如下所示：

// 获取微信右上角胶囊高度
getHeight() {
  let res = wx.getMenuButtonBoundingClientRect();
  this.titleHeight = res.top; // 获取距离赋值给padding值
},

然后，在顶部搜索的样式中，我们可以使用变量titleHeight来设置padding-top的值，从而让搜索框与顶部胶囊保持合适的间距。具体的代码如下所示：

<view :style="'padding-top:' + titleHeight + 'px'">
  <view class="search-box" fontSize='14px'>
    <u-icon size='20' bold name="arrow-left" color='#000' style="margin-right: 20rpx;" @click='backBtn'>
    </u-icon>
  </view>
</view>

通过以上步骤，我们可以实现在uniapp中自定义顶部导航栏样式，并与顶部胶囊保持合适的间距。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [uniapp写小程序顶部胶囊部分计算，布局顶部页面更美观](https://blog.csdn.net/weixin_69666355/article/details/129794864)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]