小程序自定义导航条

app.json=>window 属性   navigationStyle: "custom" 自定义导航条（胶囊导航除外）/默认值 defalut，该属性可放倒全局，也可以放到局部某一page 的json里面
app.js:

const vm = this
    wx.getSystemInfo({
      success: function (res) {
        console.log("获取的机型", res, res.model)
        let totalTopHeight = 68
        if (res.model.indexOf('iPhone X') !== -1) {
          totalTopHeight = 88
        } else if (res.model.indexOf('iPhone') !== -1) {
          totalTopHeight = 64
        }
        vm.globalData.statusBarHeight = res.statusBarHeight
        vm.globalData.titleBarHeight = totalTopHeight - res.statusBarHeight
      },
      failure() {
        vm.globalData.statusBarHeight = 0
        vm.globalData.titleBarHeight = 0
      }
    })

自定义组件

<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>

.navigate-container {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  background: pink;

}

.navigate-bar {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.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;
}

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: {}
})

页面引入

<nav-bar title="新的标题" />

json

{
  "navigationStyle": "custom",
  "usingComponents": {
    "nav-bar": "/pages/components/nav-bar/nav-bar"
  }
}

正常进入的状态下

分享进来的状态