小程序 - 自定义导航栏重要步骤

实现的步骤

几个要点：

1. statusBarHeight，用来获取手机状态栏的高度()，调用 wx.getSystemInfo 获取
2. 还有注意的，在写样式距离和大小时建议都用px，因小程序右边的胶囊也是用的px，不是rpx。
3. wx.getMenuButtonBoundingClientRect()获取胶囊信息，用来计算 导航栏高度
4. 单个页面配置自定义导航，记得把基础库 调节到 2.8.0 之上, 仅支持微信客户端7.0.0 向上

官方链接：

1. 自定义导航页面配置：navigationStyle
2. 状态栏高度 wx.getSystemInfo()
3. 胶囊 wx.getMenuButtonBoundingClientRect()
4. 自定义导航 - 微信社区 - 推荐look

根据需求来设计（可以计算各种高度）

• 状态栏高度： wx.getSystemInfo --> res.statusBarHeight
• 导航栏高度： 胶囊高度 + ( 胶囊距离顶部距离 - 状态栏高度) * 2

    data：{
        statusHeight: 0,  //状态栏高度
        navHeight: 0      //导航栏高度
    }
    /**
     * 获取状态栏|导航栏高度,
     */
    getStatusBarHeight: function(){
        let capsule = wx.getMenuButtonBoundingClientRect() ; //胶囊信息
        wx.getSystemInfo({
            success(res) {
                that.setData({
                    statusHeight: res.statusBarHeight,
                    navHeight: capsule.height + (capsule.top - res.statusBarHeight) * 2
                })
            }
        })
      
    },

<view class="status-height" style="height:{{ statusHeight }}px">  //状态栏
    cc
</view>
<view class="nav-height"  style="height:{{ navHeight }}px">       //导航栏
    bb
</view>