小程序自定义顶部导航栏

小程序自定义顶部导航栏组件的逻辑
导航栏的真实高度 = 状态栏高度 + 导航栏内容高度

状态栏高度：
使用wx.getSystemInfo()获取到statusBarHeight便是导航栏的高度

导航栏内容高度：
使用wx.getMenuButtonBoundingClientRect()获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
因为右上角胶囊按钮是原生加载的，我们的导航栏内容需要正好贴在胶囊的下方且垂直居中。
导航栏内容高度 = (胶囊按钮距离顶部的距离 - 状态栏的高度) * 2 + 胶囊的高度

var rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null;
        let _self = this
        wx.getSystemInfo({
            success:function(res){
                let navContentHeight = (rect.top - res.statusBarHeight) * 2 + rect.height
                _self.topBarHeight = res.statusBarHeight + navContentHeight
                _self.statusBarHeight = res.statusBarHeight

                _self.$emit('onHeight',res.statusBarHeight + navContentHeight)
            }
        })