小程序自定义tabBar tabBar切换颜色总是比点击慢一步

最近想使用小程序的自定义 tabBar 功能，并使用了 vant-weapp 的 tabBar 组件

• wxml
  

• js
  

想实现的效果

点击底部的不同 tab 后，页面切换的同时底部的图标也会相应变化

问题

点击底部 tab 后，页面切换了，但对应的图标没有变化，再点一次才会变化

举例

A B C 三个页面对应 tabA tabB tabC
开始是 A 页面，tab 图标为 tabA
点击 tabB 后切换到 B 页面，但底部的 tab 图标并没有切换到 tabB
再点击 tabC 后切换到 C 页面，底部的 tab 图标切换到 tabB

分析

由于每次点击 tab 触发的都是 switchTab，微信官方文档对此如下解释

wx.switchTab(Object object)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

解释

当从 A 页面切换到 B 页面时尽管通过 setData 为 tabBar 组件的 active 赋了新值，但赋给的是新一个 Componnet 中德 active，而页面上显示的还是刚刚被关闭的 tabBar 组件，于是就会出现延迟更新 tabBar 图标切换

解决方法

在每个 tab 页 Page/Component 的 onShow 中增加如下方法

onShow: function () {
    if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          active: 这个页面在tabBar组件中所对应的active的索引
        })
      }
  },

总结

其实小程序官方的自定组件的代码片段中出现了这一写法，认真阅读官方 demo 能少走很多弯路