最近我的项目涉及到微信小程序的开发，经过比较最终选择了 Vant UI 框架，到了底部导航的自定义时就被坑了，折腾了好久才彻底解决问题，达到预期的效果。可能是因为我是伪全栈程序员，前端造诣太浅，这里把实现方法记录下来，方便以后需要的时候可以参考，同行可以看看，少走弯路。

第一步，利用Vant中的组件重新打包成自己的组件

1）创建一个组件目录，命名为-tab-bar，据说这个名字必须这样命名，是小程序官方规定的，按照这个命名就行，没必要改成别的名字。

创建自定义组件目录

2）在组件中创建一个页面，并按照图中命名

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

3.1 修改.json文件，引入组件依赖，注意截图中红框部分必须声明这是一个组件，"":true。

组件依赖设置

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

组件 UI 代码

3.3 修改.js文件，添加数据、列表及事件回调函数，注意列表中的路径，前面加/，是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}`) }) } } });

至此我们的自定义组件已经完成。

步骤 2：使用自定义组件

1）在app.json文件中添加配置，如图。注意配置下面一定要有“”:true，然后配置下面需要有列表，这里填写和文本属性就可以了。注意路径前面没有/。

app.json 中的配置

2）..json文件配置修改

..json文件配置修改

此时，您的组件应该已显示。让我们展示它。

微信小程序与vant集成

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

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

其实这一步也很简单，就是在每个涉及导航的页面的生命周期函数中调用组件的init方法。简单不代表不会出错，我犯了一个很低级的错误，找了半天才找到问题所在。我犯的错误就是把方法定义了两次。由于js代码文件太长，超出了一个屏，我在添加代码的时候，没有看到系统默认添加的函数，就在上面重新定义了，导致系统定义的函数覆盖了我添加的内容，执行的时候肯定达不到预期的效果。

小心，小心，小心。反复记住这一点很重要。

各个导航页面上调用组件的方法

微信小程序底部导航

如果喜欢我的分享，请关注我，我目前是一名自由职业者，会持续分享自己在IT技术、创业相关的经验，希望对大家有价值，与大家一起成长。