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

业务需求：

ui设计的头部，右边多了一个首页的按钮，效果图

因为基本每个页面都要用得到，所有要做一个自定义的组件，直接上代码

wxml:

<view class="nav-bar" style="padding-top:{{ phoneInfo.safeArea.top}}px;">
    <view class="van-nav-bar" style="height: {{phoneInfo.safeArea.top}}px;">
        <view class="title_view">
            <view class="title_view_left">
                <view bindtap="onClickLeft">
                <!-- 返回图标 -->
                    <van-icon class="van-icon" name="arrow-left" />
                </view>
                <!-- 首页图标 -->
                <view bindtap="onBackHome">
                    <van-icon class="van-icon" name="wap-home-o" />
                </view>
            </view>
            <!-- 标题 -->
            <view class="title_view_right">{{title}}</view>
        </view>
    </view>
</view>

wxss:

/* components/nav-title-bar/nav-title-bar.wxss */

.nav-bar{
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    z-index: 99999;
  }
  .van-nav-bar{
    flex: 1;
  }
  /* .van-nav-bar{
    background-color: rgb(66, 104, 107);
    color: white !important;
    
  } */
  .title_view{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #f0f0f0;
    position: relative;
  }
  .title_view_left{
    display: flex;
    position: absolute;
    left: 15rpx;
  }
  .title_view_left view{
    margin-right: 7rpx;
    font-size: 45rpx;
    color: #090909;
  }
  /* .van-nav-bar view{
    background-color: #f0f0f0;
    color: white !important;
  } */
  .title_view_right{
    font-size: 30rpx;
    color: #090909;
  }
  .custom-class{
    padding-top: 0 !important;
  }
  .title_view_left .van-icon{
    font-size: 30rpx;
  }

js:

// components/nav-title-bar/nav-title-bar.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        showLeftBack: {
          type: Boolean,
          value:false
        },
        title:{
          type:String,
          value:""
        }
      },

    /**
     * 组件的初始数据
     */
    data: {
        phoneInfo: wx.getSystemInfoSync(), //获取导航栏的高度
        capsuleButton:wx.getMenuButtonBoundingClientRect()
    },


    /**
     * 组件的方法列表
     */
    methods: {
      // 返回上一页
      onClickLeft() {
        wx.navigateBack({
          delta:1
        })
      },
      // 回到首页
      onBackHome(){
        wx.reLaunch({
          url: '/pages/index/index'
        })
      }
    }
})

父组件使用的时候：

<nav-title-bar showLeftBack="{{true}}" title="工单管理" />