最近项目中涉及到微信小程序开发，比较了一下，最终选择了Vant Weapp这个UI框架。搞到底部导航自定义这块的时候，把我拦住了，弄了很久才完全解决了问题，实现了预期效果。可能是因为我是个伪全栈程序员，前端造诣太浅，这里记录下实现方式，以备后面再用到时，可以翻阅，同道中人们看到了，也可以少走弯路。

第一步，利用Vant Weapp里面的tabbar组件二次封装成自己的组件

1）创建组件目录，命名为custom-tab-bar，据说这个名字必须这么命名，小程序官方规定的，大家就按照这个来吧，没必要改成其他的了。

2）在组件内创建页面，命名为index，如图

3）按要求修改组件内各个文件

3.1 修改index.json文件，引入组件依赖，注意截图的红框框出的部分，必须申明这是个组件，"component": true。

3.2 修改index.wxml页面，放上组件代码。里面涉及到一些变量和事件回调函数，会在下一步提供。

3.3 修改index.js文件，添加数据active和list和事件回调函数onChange。其中list里面路径pagePath需要注意，前面需要加上/。onChange是tab切换的时候的回调，init函数后续会用到。

Component({
  data: {
    active: 0,
    list: [{
        pagePath: "/pages/index/index",
        text: "首页",
        icon: "home-o"
      },
      {
        pagePath: "/pages/order/index",
        text: "订单",
        icon: "orders-o"
      },
      {
        pagePath: "/pages/mine/index",
        text: "我的",
        icon: "user-o"
      }
    ]
  },
  methods: {
    onChange(e) {
      wx.switchTab({
        url: this.data.list[e.detail].pagePath,
      })
    },
    init() {
      const page = getCurrentPages().pop()
      this.setData({
        active: this.data.list.findIndex(item => item.pagePath === `/${page.route}`)
      })
    }
  }
});

到这里为止，我们的自定义组件就完成了。

第二步，使用自定义组件tabbar

1) 在app.json文件中增加配置tabbar, 如图，注意，配置下必须要有"custom": true，然后需要有配置下list，这里填下pagePath和text属性就足够了，注意，pagePath的路径前面没有/。

2) project.config.json文件配置修改

到这一步，你的组件应该能显示出来了，来展示下吧

到这里还没完，你会发现切换导航的时候，对应的导航项，并没有高亮显示。下一步我们就来解决这个问题，继续优化。

第三步，各个页面中调用组件方法，设置当前导航项高亮。

其实，这一步也很简单，就是在各个导航涉及的页面的生命周期函数onShow中，调用组件的init方法。简单不意味着就不会犯错，我就犯了一个很低级的错误，搞了大半天才发现问题所在。我犯的错误是onShow方法定义了两遍，由于js代码文件太长，超过一屏，我在增加代码的时候，没看到系统给我们默认增加的onShow函数，在上面自己重新定义了一个，导致系统定义的函数覆盖了我增加写的内容，执行的时候，肯定达不到预期效果。

细心，细心，细心，重要的事情，说多少遍都不为过。

喜欢我的分享的话，就关注我吧。我目前是一个自由职业者，我会持续分享IT技术相关，创业相关的心路历程，希望对大家有价值，与大家一起成长。