1. 使用场景

1. 某个页面的 json 文件中

{
  "navigationStyle": "custom"
}

2. 全局 app.json 使用

 "window":{
    "navigationStyle": "custom"
  },
  "usingComponents": {
    "nav-bar": "/component/navBar/navBar"
  },

2. js 部分

// component/navBar/navBar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      // 属性名
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '' // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    whetherShow: {
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '' // 属性初始值（可选），如果未指定则会根据类型选择一个
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    navigaTitle: '',
    ws: true,
    statusBarHeight: ''
  },

  ready: function () {
    console.log(wx.getSystemInfoSync())
    var temp
    if (this.data.whetherShow == '0') {
      temp = false
    } else {
      temp = true
    }
    this.setData({
      navigaTitle: this.data.title,
      ws: temp,
      statusBarHeight: wx.getSystemInfoSync().statusBarHeight
    })
  },

  /**
   * 组件的方法列表
   */
  methods: {
    navigateBack: function () {
      wx.navigateBack({
        delta: 1
      })
    }
  }
})

3. xwml navBar.wxml

<view class="flxr jcb container" style="height:235rpx">
	<image src="/image/1.jpg" class="img-style" style="height:235rpx"></image>
	<view class="icon flxr aic ml20" bindtap="navigateBack" style="margin-top:{{statusBarHeight}}px">
		<image wx:if="{{ws}}" src="/image/left.png" class="left"></image>
		<view wx:if="{{ws}}" class="backClass">返回</view>
	</view>
	<view class="title" style="margin-top:{{statusBarHeight}}px">{{title}}</view>
	<view class="icon"></view>
</view>

4. wxss

/* component/navBar/navBar.wxss */
@import '/app.wxss';

.title {
  color: #000;
  height: 50rpx;
  width: 300rpx;
  z-index: 2;
  line-height: 50rpx;
  text-align: center;
  font-size: 36rpx;
  padding-top: 20rpx;
}

.container {
  width: 100%;
  height: 60px;
  position: relative;
  /* background-image: linear-gradient(to right,#FF7C6B,#E33229); */
  position: fixed;
  top: 0;
  z-index: 999;
}

.img-style {
  width: 100%;
  height: 60px;
  position: absolute;
  top: 0;
  z-index: 1;
}

.icon {
  height: 60rpx;
  width: 240rpx;
  z-index: 2;
  padding-top: 20rpx;
}

.left {
  height: 30rpx;
  width: 35rpx;
}

.backClass {
  color: #fff;
  font-size: 30rpx;
}

5. 使用

<nav-bar title="自定义导航栏" whetherShow="1"></nav-bar>