重新封装vant小程序导航栏

vant自带的导航栏左侧箭头需要自己添加方法，但是在实际开发很多页面需要返回上一页，每次都要重写返回方法很麻烦，封装成一个单独组件会方便很多，样式也可以自己直接调节。

wxml:

<van-nav-bar title="{{title}}"  left-arrow="{{leftArrow}}" border="{{border}}" fixed="{{fixed}}" placeholder="{{placeholder}}" 
bind:click-left="onClickLeft" custom-class="{{customClass}}" custom-style="{{customStyle}}" />

js:

// pages/components/custom-nav-bar/custom-nav-bar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title:{
      type: String,
      value: '',
    },
    border:{
      type: Boolean,
      value: true,
    },
    fixed:{
      type: Boolean,
      value: true,
    },
    placeholder:{
      type: Boolean,
      value: true,
    },
    leftArrow:{
      type: Boolean,
      value: false,
    },
    customStyle:{
      type: String,
      value: '',
    },
    customClass:{
      type: String,
      value: '',
    }
  },
  options: {
    styleIsolation: 'shared',
  },
  /**
   * 组件的初始数据
   */
  data: {
    title:'',
    border:true,
    fixed:true,
    placeholder:true,
    leftArrow: false,
    customStyle:'',
    customClass:'',
  },

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

json:

{
  "component": true,
  "usingComponents": {}
}

由于常用，所以直接在app.json 的 usingComponents 引用就可以全局调用了

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

在页面调用：

<custom-nav-bar title="标题" left-arrow  />