微信小程序(uniapp)自定义导航栏

想要实现自定义导航栏效果图如下

image.png
在code实现之前先敲黑板（了解一下需要的知识点）
image.png

由图我们可以看出
而可以通过 获取，现在就只用解决导航栏的高度了
观察发现，胶囊顶部高度距离航栏顶部高度的高度差 和 胶囊底部高度距导航栏底部高度的高度差 是一样的，也就是说
而 可以通过 获取，现在就只用解决高度差了
中也返回了胶囊顶部距屏幕顶部距离的信息（top）
所以知
具体实现：
1.先在pages.json中设置 navigationStyle 为 custom

image.png

2. js 获取相关数据

// 获取导航栏的高度
export const computedNavHeight = () => {
    // #ifdef MP-WEIXIN
    if (wx.canIUse('getMenuButtonBoundingClientRect')) {
        let sysInfo = wx.getSystemInfoSync();
        //状态栏的高度
        let statusBarHeight = sysInfo.statusBarHeight;
        // 胶囊位置信息
        let rect = wx.getMenuButtonBoundingClientRect();
        let menuButtonRect = JSON.parse(JSON.stringify(rect));
        // 导航栏高度
        let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
        // 自定义导航栏的高度
        let height = (statusBarHeight + navBarHeight);
        return {
            statusBarHeight,
            menuButtonRect,
            navBarHeight,
            height
        }
    } else {
        wx.showToast({
            title: '您的微信版本过低，界面可能会显示不正常',
            icon: 'none',
            duration: 4000
        });
    }
    // #endif
}

3. html 设置相关
   

   由于js方法是封装好的，所以需要在js里先引入在使用 image.png
   image.png