小程序自定义导航栏，计算胶囊位置

效果图

wxml

<view class="nav-bar" style="height:{{capsuleButton.bottom+5}}px">
  <view class="nav-bar-box"></view>
  <view style="width:{{capsuleButton.width+(phoneInfo.screenWidth - capsuleButton.right)+5}}px;background:#ccc;"></view>
</view>

wxss

.nav-bar{
  width: 100%;
  height: 150rpx;
  background: red;
  display: flex;
}
.nav-bar-box{
  flex: 1;
}

js

data: {
    capsuleButton:{},// 右上角胶囊按钮的属性
    phoneInfo:{},// 手机信息
  },
  onLoad: function (options) {
	this.setData({ 
		phoneInfo: wx.getSystemInfoSync(),
	capsuleButton:wx.getMenuButtonBoundingClientRect()
		})
	  },
}