小程序中怎么使胶囊和你的内容同一行显示

步骤一：你要获取状态栏的高度

const barTop = wx.getSystemInfoSync().statusBarHeight

步骤二：获取导航栏的高度（胶囊的高度+胶囊的上下外边距）

//胶囊的信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
//导航栏的高度
const barHeight = menuButtonInfo.height+(menuButton.top-barTop)*2


//得到了导航栏+状态栏的高度
const totalHeight = barHeight+barTop

步骤三

使用this.setData({
  barTop ,//状态栏高度
  barHeight ,//导航栏高度
  totalHeight //总的高度
  
})

步骤四：

<view style = "height:{{totalHeight}}px">
<view style = "height:{{barHeight}}px;padding-top:{{barTop }}px">
//写你的内容
</view>
</view>

步骤五：

要在app.json里面去配置你的自定义导航
"navigationStyle": "custom",