自定義的導(dǎo)航欄：

app.json:
    "navigationStyle": "custom"
自定義：
    
<!--wxml-->
<view class='header'>
  <view class='flex'>
    今日菜價(jià)
  </view>
</view>
<!--wxss-->
.header{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 114rpx;
  padding: 0;
  padding-top: 40rpx;
  border-bottom: none;
  background-color: #ffffff;
}
.header::after{
  content: "";
  display: inline-block;
  width: 100%;
  height: 40rpx;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #000000;
}
.header>view{
  width: 100%;
  height: 100%;
  padding: 0 15rpx;
}

自定義效果圖一（iphone6）：

自定義效果圖二（iphone5）：

產(chǎn)品需求的樣式圖：

那個(gè)右邊的膠囊，位置總是相較于自定義的導(dǎo)航欄亂跑，如何避免？