微信小程序 头部适配 胶囊

样式如上图所示它的要求：一个头部样式自定义，它在胶囊左边的内容又分为左右两部分，如何让它屏幕宽自适应？只需要用到wx.getMenuButtonBoundingClientRect()获取胶囊信息就可以写出来

例子如下

1 let menuButton=wx.getMenuButtonBoundingClientRect()
2 this.setData({
3    signaHeight:menuButton.height
4    signaTop:menuButton.top
5    signaRight:menuButton.right
6    signaLeft:menuButton.left
7    signaWidth:menuButton.width
8 })

然后在页面中的样式就可以写了，红色区域的宽就是胶囊距离左边的距离{{signaLeft}}px,距离上面的距离用padding-top写{{signaTop}}，高也就是胶囊的高{{signaHeight}}