微信小程序自定义标题栏，状态栏，顶部导航

1、设置页面.json 配置文件
"navigationStyle":"custom"

2、计算状态栏高度及右侧按钮栏高度

   let menuButtonObject = wx.getMenuButtonBoundingClientRect();
        wx.getSystemInfo({
            success(res) {
                let statusBarHeight = res.statusBarHeight;//状态栏的高度 
                let menuTop = menuButtonObject.top; //胶囊按钮与顶部的距离
                let navHeight = menuButtonObject.height + (menuTop - statusBarHeight) * 2; //导航高度 取该高度作为标题栏高度
             }
        })

3、使用 view标签自定义导航内容

<view class="status-bar" :style="{ height: `${statusBarHeight}px` }"></view>
<view class="nav-bar" :style="{ height: `${navHeight}px` }">标题</view>