在这里，我是使用vant-app的tabbar组件为例，替换小程序原生的tabbar
第一、在使用npm下载vant-app的组件
npm i vant-weapp第二、在app.json配置tabbar配置信息
"tabBar": { "custom": true, "list": [ { "pagePath": "pages/index/index", "text": "待办" }, { "pagePath": "pages/inProcess/index", "text": "进行" }, { "pagePath": "pages/me/index", "text": "我的" } ] }注意：需要设置 custom 为 true
第三、创建响应自定义的组件来替换小程序原生的tabbar
在小程序根目录创建custom-tab-bar文件夹，里面放的是你需要自定义的tabbar组件，我的文件目录跟内容是这样子的
- custom-tab-bar/index.js
Component({ /** * 组件的初始数据 */ data: { active: 0 }, /** * 组件的方法列表 */ methods: { onChange: function (event) { // event.detail是vant-app的tabbar组件选择的序号，相当于获取点击van-tabbar-item的序号 if (event.detail == 2) { this.switchTab("/pages/me/index") this.setData({ active: event.detail }) } else if (event.detail == 1) { this.switchTab("/pages/inProcess/index") this.setData({ active: event.detail }) } else { this.switchTab("/pages/index/index") this.setData({ active: event.detail }) } }, switchTab: function (url, callback) { if (!callback) { callback = res => { } } callback() wx.switchTab({ url }) } }})- custom-tab-bar/index.json
{ "component": true, "usingComponents": { "van-tabbar": "vant-weapp/tabbar/index", "van-tabbar-item": "vant-weapp/tabbar-item/index" }}- custom-tab-bar/index.wxml
<!--miniprogram/custom-tab-bar/index.wxml--><van-tabbar active="{{ active }}" active-color="#07c160" inactive-color="#000" bind:change="onChange"> <van-tabbar-item class="tabbar" icon="clock-o">待办</van-tabbar-item> <van-tabbar-item class="tabbar" icon="passed">完成</van-tabbar-item> <van-tabbar-item class="tabbar" icon="user-o">我的</van-tabbar-item></van-tabbar>
第四、在相应的tabbar页面设置好tabbar的初始化参数
比如说，我想要跳转到/pages/me/index的tabbar页面，就需要在/pages/me/index.js文件中加入下面代码
onShow: function() { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ active: 2 }) } }this.getTabBar：返回当前页面的 custom-tab-bar 的组件实例
如果不设置这一步，使用vant-app的tabbar组件替换小程序的tabbar，会发生tabbar组件响应的激活样式不能及时地更新
