微信小程序自定义头部导航栏

<!--index.wxml-->
<view>
　　<navbar id='index_header' background='{{background}}' pageName="{{pageName}}" showNav='false' showHome='false' flag='{{flag}}' userimg='{{userimg}}'></navbar>
</view>

 

 

 

<!--index.js-->

 

<!--index.json-->

引入自定义头部文件

 

 文件链接：https://i.cnblogs.com/Files.aspx

效果展示

 

 

 

 在app.js文件的 onshow 里加

 // 自定义导航栏
    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);
      }
    })