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

业务背景：原生小程序头部单调，没有回到首页按钮，无法用图片作为背景，无法设置渐变色，想动态控制是否展示header，总之 都有

话不多说，上码，粘过去直接用

app.js:

onLaunch: function (options) {
	...
	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._h = menuButtonObject.height;
        this.globalData.windowHeight = res.windowHeight;
      },
      fail(err) {
        console.log(err);
      }
    })
	...
}

组件相关：
header.html

<view class="headerbox custom-header-class" wx:if="{{customParameter.showheader}}" style="height:{{navHeight}}px;background:{{b_g_img}}">
  <view class="header_left" style="top:{{navTop}}px;">
    <view class="back _inline custom-header-back" bindtap="back" wx:if="{{show_back=='show'}}">
      <view class="back_"></view>
    </view>
    <image class="homes" bindtap="gohome" wx:if="{{show_home == 'show'}}" src="https://img.miyabaobei.com/d1/p6/2020/03/26/db/5c/db5c1aa16d5d15ada15e31edccf2a55e185141541.png"></image>
  </view>
  <view class="title _inline custom-header-title" wx:if="{{showpageName}}" style="top:{{navTop}}px;">
    {{pageName}}
  </view>
</view>

header.js

const App = getApp();
Component({
  options: {
    addGlobalClass: true,
  },
  properties: {
    pageName: String,
    customParameter: {
      type: Object,
    },
    showLeft: {
      type: Boolean,
      value: false
    },
  },
  data: {
    b_g: ''
  },
  lifetimes: {
    attached: function () {
      this.setData({
        navHeight: App.globalData.navHeight, // header高度
        navTop: App.globalData.navTop, // 文字距离顶部高度
        pageName: this.data.customParameter.pageName || '标题',
        show_back: this.data.customParameter.show_back || 'show',
        show_home: this.data.customParameter.show_home || 'noshow',
        b_g_img: this.data.customParameter.b_g_img,
        showpageName: this.data.customParameter.showpageName,
        // pagebg: this.data.customParameter.pagebg,
      })
    }
  },
  methods: {
    back: function () {
      wx.navigateBack({
        delta: 1
      })
    },
    gohome: function () {
      wx.navigateTo({
        url: "/pages/index/index"
      })
    },
  },
})

header.css:

.headerbox {
  width: 100%;
  height: auto;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}

.header_left {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 11;
  height: 32px;
}

._inline {
  display: inline-block;
}

.title {
  width: 100%;
  box-sizing: border-box;
  padding-left: 115px;
  padding-right: 115px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  position: absolute;
  left: 0;
  z-index: 10;
  color: #fff;
  font-size: 16px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.back {
  width: 50rpx;
  height: 50rpx;
}

.back_ {
  width: 20rpx;
  height: 20rpx;
  border-bottom: 2rpx solid #000;
  border-left: 2rpx solid #000;
  transform: rotate(45deg);
  margin-right: -50rpx;
  margin-left: 20rpx;
  margin-top: 16rpx;
}

.homes {
  width: 50rpx;
  height: 50rpx;
}

页面相关：
test_header.wxml

<header custom-header-class="custom-header-class" custom-header-back="custom-header-back" custom-parameter="{{parmClection}}" custom-header-title="custom-header-title"></header>

test_header.js

Page({
  data: {
    parmClection:{
      pageName:"进度查询", //文案
      showpageName:true, //是否展示文案
      show_back: 'show', // 返回按钮是否展示
      b_g_img:"linear-gradient(270deg, #6DCAD6 0%, #07BFBB 100%)", // 头部背景色
      show_img:true, // 图片和背景展示
      showheader: true, //header是否展示
      // pagebg:"#FAF7FA",
      show_home:'', //去首页是否展示
    },
  },
})

test_header.json
***navigationStyle 这个必须要有，不然原生自带的头部依然会存在

{
  "navigationStyle": "custom",
  "usingComponents": {
    "header":"../../components/header/header"
  }
}

说明：只是初步实现了效果，可能不是很完善，欢迎大佬讨论交流

觉得不错，赏个关注呗😀，不胜感激Thanks♪(･ω･)ﾉ