如何自己写个自定义的小程序导航栏

首先这个是我学习他人代码的学习记录，算是个备忘。

这里使用的方式是自己创建一个小程序组件，这样可以便于代码的复用。

1》搞清如何建个components组件.

• 先在app.json中window中加入如下配置------"navigationStyle": "custom"
• 接着在项目的中创建一个componnets,这里跟我们创建pages页面没啥两样。
• 在component中编写组件的各中属性啦，方法啦，可以想一下我们在使用官方提供的那些控件时的各种属性，我们就是需要给自己的控件设置这些东西，方便我们可以使用时进行设置。此处需要设置的有

  /**

     * 组件的属性列表

     */

    properties: {

      vTitle:{

        type:"string",

        value:""

      },

      isSearch:{

        type:"string",

        value:""

      }

    },

 /**

   * 组件的初始数据

   */

  data: {

    haveBack:true,

    statusBarHeight:0,

    navbarHeight:0,

    navbarBtn:{

      height:0,

      width:0,

      top:0,

      bottom:0,

      right:0

    },

    cusnavH:0,

  },

/**

   * 组件的方法列表

   */

  methods: {

    _goBack:function(){

      wx.navigateBack({

        complete: (res) => {

          delta:1

        },

      })

    },

    bindKeyInput:function(e){

      console.log(e)

    }

等。例如本次我们为了获取胶囊按钮的位置，我们还需要结合app的全局变量写一个函数去获取状态栏和胶囊按钮的位置。到这里我们自定义组件的源码工作其实也就差不多了。（当然还需要写组件的样式和wxml编码）。

好了我们怎么使用这个组件呢？在需要的页面中添加这个组件就可以了。

<!--index.wxml-->

<NavComponent v-title="自定义头部" bind:commonNavAttr="commonNavAttr"></NavComponent>