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

根据需求，需要做一个自定义的头部导航，以便自适应其他需求和机型，在此封装了一个navbar

wxml文件

<view class='nav-wrap' style='height: {{height*2 + 20}}px; background-color: {{navbarData.backgroundColor}};'>
  <view class='nav-title' style='line-height: {{height*2 + 44}}px; color: {{navbarData.color}}'>{{navbarData.title}}</view>
  <view style='display: flex; justify-content: space-around;flex-direction: column'>
    <view class='nav-capsule' style='height: {{height*2 + 44}}px;' wx:if='{{navbarData.showCapsule}}'>

      <view bindtap='_navback' wx:if='{{!share}}'>
        <image src='/images/back-pre.png' mode='aspectFill' class='back-pre'></image>
      </view>
<!-- 
      <view bindtap='_backhome'>
        <image src='/imgs/back-home.png' mode='aspectFill' class='back-home'></image>
      </view> -->
    </view>
  </view>
</view>

wxss文件

/* 顶部要固定定位   标题要居中   自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
.nav-wrap {
    position: fixed;
    width: 100%;
    top: 0;
    color: #000;
    z-index: 9999999;
  }
  /* 标题要居中 */
  .nav-title {
    position: absolute;
    text-align: center;
    max-width: 400rpx;
    overflow: hidden;
    white-space: nowrap;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 74rpx;
    font-size: 38rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 50rpx;
  }
  
  .nav-capsule {
    display: flex;
    align-items: center;
    margin-left: 30rpx;
    width: 140rpx;
    justify-content: space-between;
    height: 100%;
  }
  
  .navbar-v-line {
    width: 1px;
    height: 32rpx;
    background-color: #e5e5e5;
  }
  
  .back-pre, .back-home {
    width: 16rpx;
   height: 32rpx;
    margin-top: 6rpx;
    padding: 12rpx;
  }
  .nav-capsule .back-home {
    width: 16rpx;
    height: 32rpx;
    margin-top: 5rpx;
  }

js文件

const app = getApp()
Component({
  properties: {
    navbarData: {   //navbarData   由父页面传递的数据，变量名字自命名
      type: Object,
      value: {},
      observer: function (newVal, oldVal) {}
    }
  },
  data: {
    height: '',
    //默认值  默认显示左上角
    navbarData: {
      showCapsule: 1
    }
  },
  attached: function () {
    // 获取是否是通过分享进入的小程序
    this.setData({
      share: app.globalData.share
    })
    // 定义导航栏的高度   方便对齐
    this.setData({
      height: app.globalData.height
    })
  },
  methods: {
  // 返回上一页面
    _navback() {
      wx.navigateBack()
    }
  //返回到首页
    // _backhome() {
    //   wx.switchTab({
    //     url: '/pages/index/index',
    //   })
    // }
  }

}) 

json文件（定义它为组件）

{
    "component": true
}