• 一 引入自定义头部组件
• 二 设置app.json（"navigationStyle": "custom"）
• 三 app.js中添加代码（获取屏幕信息，设置头部高度）
• 四 引用自定义组件
• 五 页面上使用
• 六 最终效果图
• 其它说明

一 引入自定义头部组件

二 设置app.json（“navigationStyle”: “custom”）

"navigationStyle": "custom"

三 app.js中添加代码（获取屏幕信息，设置头部高度）

getScreenHeight() {
    //获取手机屏幕信息。设置头部高度
    let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    wx.getSystemInfo({
      success: res => {
        let statusBarHeight = res.statusBarHeight,
          navTop = menuButtonObject.top, //胶囊按钮与顶部的距离
          navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2; //导航高度
        this.globalData.navHeight = navHeight;
        this.globalData.navTop = navTop;
        this.globalData.windowHeight = res.windowHeight;
      },
      fail(err) {
        console.log(err);
      }
    })
  }

四 引用自定义组件

"nav-bar": "/components/navBar/navBar"

五 页面上使用

<nav-bar page-name="测试页面"></nav-bar>

六 最终效果图

其它说明

1. 图标使用得阿里云图标，在app.wxss中引入
2. 内容也是结合其它同行代码写出来，再结合了自己的想法
3. 上面得例子是源码中得test1，其它更复杂得使用请看testx
4. 总结的时候未梳理代码，但可正常使用，可能存在部分代码冗余，请自查
5. 比较复杂使用请参考后续demo（目前只有一个demo）
6. demo地址：https://download.csdn.net/download/Heandme/14157042

本文地址：https://blog.csdn.net/Heandme/article/details/112575895