微信小程序自定義頭部導航欄

<!--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);
      }
    })