微信小程序自定义navigationBar与胶囊对齐，解决方案

index.js

Page({
    data: { 
    	// 状态栏上方空白
        navigationBarTop: wx.getStorageSync('navigationBarTop'),
        // 导航栏高度
        navigationBarHeight: wx.getStorageSync('navigationBarHeight') ,
    onLoad() {
        // 获取状态栏高度
        const {
            statusBarHeight,
        } = wx.getSystemInfoSync()
        //获取胶囊信息
        const {
            top,
            height
        } = wx.getMenuButtonBoundingClientRect()
        // 自定义导航栏的到顶部距离 = 状态栏高度
        wx.setStorageSync('navigationBarTop', statusBarHeight)
        // 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2。如果获取不到设置为38
        wx.setStorageSync('navigationBarHeight', height ? height+(top - statusBarHeight) * 2 : 38)
    }
 })

index.wxml

<view class="search" style="height: {{navigationBarHeight}}px;padding-top: {{navigationBarTop}}px;">
  <view class="city">北京市<image class="icon" src="/static/icons/下箭头.png"></image></view>
  <view class="input">
  <image class="icon" src="/static/icons/搜索.png"></image>
  <input type="text" placeholder="请输入电影"/>
  </view>
</view>
<!-- 占位 -->
<view style="height: {{navigationBarHeight+navigationBarTop}}px;"></view> 
<view class="navbar">
  <text class="item {{currentTab==index?'active':''}}" wx:for="{{navbar}}" data-tab_index="{{index}}" wx:key="unique" bindtap="changeNavBar">{{item}}</text>
</view>

index.wxss

.search {
  z-index: 10;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0rpx 20rpx;
  font-size: 26rpx;
  position: fixed;
  background-color: #fff;
}