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

推荐优秀博客 -----1


1.0 自定义头部导航栏组件

	// 1.0 在app.json中自定义导航栏配置
	 	"navigationStyle": 'custom
	// 2.0 获取胶囊位置相关信息
		let rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null;
	// 3.0 计算 导航栏的高度 = 胶囊到状态栏的距离 * 2 + 胶囊的高度 + 状态栏的高度
	   let realHeight = (rect.top - statusBarHeight) * 2 + rect.height + statusBarHeight; // 详细代码在下面
	// 4.0 自定义一个头部组件
	

2.0 在app.js中获取胶囊的相关信息来实现自定义头部导航栏

    // 获取胶囊信息
    let rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null;
    console.log("rect", rect)
    // 获取设备信息
    wx.getSystemInfo({
      success: res => {
       // 获取屏幕宽度
        let windowWidth = res.windowWidth;
       // 获取状态栏的高度
        let statusBarHeight = res.statusBarHeight;
       // 根据胶囊的位置计算导航栏的高度
        let realHeight = (rect.top - statusBarHeight) * 2 + rect.height + statusBarHeight;
        this.globalData.navH = realHeight;
       // 根据胶囊的位置计算文字的行高以及距离状态栏的位置
        let lineHeight = (rect.top - statusBarHeight) * 2 + rect.height;
        this.globalData.lineHeight = lineHeight;
        this.globalData.paddingTop = statusBarHeight;
       // 根据胶囊的位置计算距离右侧的宽度，用于设置返回按钮至左侧的距离
        let leftDistance = windowWidth - rect.right;
        this.globalData.leftDistance = leftDistance;
      },
      fail: erro => {
        console.log(res)
      }
    })
  },
  globalData: {
    userInfo: null,
    navH:0,
    lineHeight:0,
    paddingTop:0,
    leftDistance: 0
  }