在使用vant做小程序时，使用custom-tab-bar自定义tab bar。发现vant-tabbar页面切换后，点击图标未能激活，不生效，需要重复点击才生效变色。
解决方案：
如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态。
因此在每个页面的onshow方法里获取tabbar的实例，并实现激活。
下面是核心片段代码
1. tab bar的使用
务必查看另一文章：小程序vant-tabbar使用示例，及报错处理
其中tabOnChange方法中的setData可以去掉mininprogram/custom-tab-bar/index.ts文章来源：https://www.toymoban.com/news/detail-517767.html
Page({
// ...
/**
* tab点击事件
* @param event
*/
tabOnChange(event: any) {
// this.setData({ active: event.detail }); 在其他tab页面实现
wx.switchTab({
url: this.data.list[event.detail].url
})
},
})
2. 在user的tab页页激活tabbar
mininprogram/pages/user/user.ts文章来源地址https://www.toymoban.com/news/detail-517767.html
Page({
onShow() {
// 通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态
this.getTabBar().setData({active: 3})
},
})
到了这里，关于vant-tabbar 点击图标未能激活，不生效，需要重复点击才生效变色的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[已解决]vant 样式不生效](https://imgs.yssmx.com/Uploads/2024/02/494135-1.png)
