自定义导航栏在刚出的时候已经有很多实现方案了，但是还有大哥在问，那这里再贴下代码及原理：

首先在App.js的 onLaunch中获取当前手机机型头部状态栏的高度，单位为px，存在内存中，操作如下：

onLaunch() {
  wx.getSystemInfo({
      success: (res) => {
        this.globalData.statusBarHeight = res.statusBarHeight
        this.globalData.titleBarHeight = wx.getMenuButtonBoundingClientRect().bottom + wx.getMenuButtonBoundingClientRect().top - (res.statusBarHeight * 2)
      },
      failure() {
        this.globalData.statusBarHeight = 0
        this.globalData.titleBarHeight = 0
      }
    })
   } 

然后需要在目录下新建个components文件夹，里面存放此次需要演示的文件 navigateTitle

WXML 文件如下：

<view class="navigate-container">
  <view style="height:{{statusBarHeight}}px"></view>
  <view class="navigate-bar" style="height:{{titleBarHeight}}px">
    <view class="navigate-icon">
      <navigator class="navigator-back" open-type="navigateBack" wx:if="{{!isShowHome}}" />
      <navigator class="navigator-home" open-type="switchTab" url="/pages/index/index" wx:else />
    </view>
    <view class="navigate-title">{{title}}</view>
    <view class="navigate-icon"></view>
  </view>
</view>
<view class="navigate-line" style="height: {{statusBarHeight + titleBarHeight}}px; width: 100%;"></view>

WXSS文件如下：

.navigate-container {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  background: #FFF;
}
 
.navigate-bar {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
 
.navigate-icon {
  width: 100rpx;
  height: 100rpx;
  display: flex;
  justify-content: space-around;
}
 
.navigate-title {
  width: 550rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: 34rpx;
  color: #3c3c3c;
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
 
/*箭头部分*/
.navigator-back {
  width: 36rpx;
  height: 36rpx;
  align-self: center;
}
 
.navigator-back:after {
  content: '';
  display: block;
  width: 22rpx;
  height: 22rpx;
  border-right: 4rpx solid #000;
  border-top: 4rpx solid #000;
  transform: rotate(225deg);
}
 
.navigator-home {
  width: 56rpx;
  height: 56rpx;
  background: url(https://qiniu-image.qtshe.com/20190301home.png) no-repeat center center;
  background-size: 100% 100%;
  align-self: center;
}

JS如下：

var app = getApp()
Component({
  data: {
    statusBarHeight: '',
    titleBarHeight: '',
    isShowHome: false
  },
  properties: {
    //属性值可以在组件使用时指定
    title: {
      type: String,
      value: '青团公益'
    }
  },
  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show() {
      let pageContext = getCurrentPages()
      if (pageContext.length > 1) {
        this.setData({
          isShowHome: false
        })
      } else {
        this.setData({
          isShowHome: true
        })
      }
    }
  },
  attached() {
    this.setData({
      statusBarHeight: app.globalData.statusBarHeight,
      titleBarHeight: app.globalData.titleBarHeight
    })
  },
  methods: {}
})

JSON如下：

{
  "component": true
}

如何引用？

需要引用的页面JSON里配置：

"navigationStyle": "custom",
"usingComponents": {
    "navigate-title": "/pages/components/navigateTitle/index"
  }

WXML

<navigate-title title="青团社" />

按上面步骤操作即可实现一个自定义的导航栏。 如何实现通栏的效果默认透明以及滚动更换title为白色背景，如下图所示:

最后代码片段如下：

https://developers.weixin.qq.com/s/wi6Pglmv7s8P。

以下为收集到的社区老哥们的分享：

@Yunior:
小程序顶部自定义导航组件实现原理及坑分享

@志军:
微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能

@✨o0o有脾气的酸奶💤
[有点炫]自定义navigate+分包+自定义tabbar

@安晓苏
分享一个自适应的自定义导航栏组件