微信小程序自定义头部

微信小程序自定义头部

1、app.js

  onLaunch: function () {
   

     // 自定义头部
     let menuButtonObject = wx.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
     console.log(menuButtonObject)
     wx.getSystemInfo({
   //获取系统信息
       success: res => {
   
         let statusBarHeight = res.statusBarHeight,//状态栏的高度，单位px
           navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
           navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//导航高度
            this.globalData.navHeight = navHeight;
            this.globalData.navTop = navTop;
            this.globalData.windowHeight = res.windowHeight;//可使用窗口高度，单位px
            console.log(navHeight,navTop)
       },
       fail(err) {
   
         console.log(err);
       }
     })
 
  },

2、navbar文件夹

1. navbar.wxml

<view class="navbar custom-class {
    {isBg==1?'bgColor':''}}" style="height:{
      {
      navHeight}}px;background-color:">
  <view wx:if="{
    {showNav}}" bindtap="navBack" class="navbar-action-wrap navbar-action-group row