我用的是Vant Weapp UI组件库，需要用store 全局共享数据 解决tabbar切换激活样式问题

关于如何使用 Mobx，创建store可参考：微信小程序 Mobx实现数据共享（创建store数据共享 + 页面、组件间的数据传递）_Shimeng_1989的博客-CSDN博客

自定义tabbar 步骤：

// 以下内容可参考 小程序文档 -- 自定义tabbar//1.在package.json 文件中找到/新增 tabBar对象//2.添加custom:true 设置//3.开启自定义tabbar后，在根目录创建 custom-tab-bar 文件夹(名字必须叫这个)。//4.在此文件夹下创建 index.wxml、index.js、index.wxss、index.json 四个文件//(可以将鼠标放在文件夹上，右键 -- (选择)创建component（命名index） -- 回车，则会自从创建这四个文件) "tabBar": {"custom": true, // 开启自定义tabbar配置"list": [{ // list不需要删掉 -- 为了向下兼容老版tabbar"pagePath": "pages/index/index","text": "首页","iconPath": "/images/1.png","selectedIconPath": "/images/2.png"}, {"pagePath": "pages/request/request","text": "请求","iconPath": "/images/1.png","selectedIconPath": "/images/2.png"}]},

创建自定义 tabbar 对应文件：( 以下内容可参考 小程序文档 -- 自定义tabbar) 在package.json 文件中找到/新增 tabBar对象添加custom:true 设置开启自定义tabbar后，在根目录创建 custom-tab-bar 文件夹(名字必须叫这个)在此文件夹下创建 index.wxml、index.js、index.wxss、index.json 四个文件。(可以将鼠标放在文件夹上，右键 -- (选择)创建component（命名index） -- 回车，则会自从创建这四个文件)

index.wxml文件：

<!-- 可根据项目具体情况，参考Vant Weapp官方文档中的配置修改 --><!-- active : 选中 tabbar 的下标 ，info：是否显示消息数量(''/0，则不显示） --><!-- for 循环 tabbar数组 --><van-tabbar active="{{ active_index }}" bind:change="onChange"><van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info||''}}"><imageslot="icon"src="/images/1.png"mode="aspectFit"style="width: 30px; height: 18px;"/><imageslot="icon-active"src="/images/2.png"mode="aspectFit"style="width: 30px; height: 18px;"/>{{item.text}}</van-tabbar-item></van-tabbar>

index.js文件：

// .js文件/* 注意：!!!每次切换页面时，更新到跳转页面后会刷新active值(我猜的)。所以每次跳转完成后，都会回到 首页(active_index: 0) 的激活状态。因此，要将 active_index (选中tabbar下标）放到store全局数据中。每次跳转时，更新active_index值，激活状态则可保留在当前跳转页的tabbar上。*/import { storeBindingsBehavior } from "mobx-miniprogram-bindings"import { store } from '../store/store'Component({options: {styleIsolation: 'shared', //设置为shared，修改 Vant Weapp UI组件库中的样式才能生效},behaviors: [storeBindingsBehavior], // 通过 storeBindingsBehavior 来实现自动绑定storeBindings: {store, // 指定要绑定的 storefields: { // 指定要绑定的字段数据active_index:'tabbar_active_index',// 获取 store 中，tabbar选中的下标num1:'store.store_count1', // 获取list中 首页的 info（消息条数）count_sum: 'store_count_sum' // 获取list中 请求的 info（消息条数）},actions: { // 指定要绑定的方法update_tabbarIndex: 'update_Tabbar_active_index' // 更新 tabbar选中的下标}},// 监听 store中值的修改，更新list中的info消息数量observers: {'num1,count_sum': function (num, sum) {// 更新list中的info数量this.setData({'list[0].info': num,'list[1].info': sum,})}},data: {// active_index: 0, // 每次切换页面时，更新为更新跳转页面后会刷新active值(我猜的)，所以每次都会回到首页(下标0)的激活状态。所以要将此字段放到store全局数据中，每次跳转时修改当前值，则可保留在跳转页tabbar激活状态上。list: [{"pagePath": "pages/index/index","text": "首页",info: 0,"iconPath": "/images/1.png","selectedIconPath": "/images/2.png"}, {"pagePath": "pages/myfood/myfood","text": "myfood","iconPath": "/images/1.png","selectedIconPath": "/images/2.png"}]},/*** 组件的方法列表*/methods: {onChange(event) {// event.detail 的值为当前选中项的索引// this.setData({ active_index: event.detail});// 不在此文件data中声明了，所以不需要setData更新值了。改为触发 store 的 action 中的方法修改store中的 active_index (tabbar_active_index) 了this.update_tabbarIndex(event.detail)//更新 store 中 tabbar_active_index(active_index）的值// 跳转到对应tabbar的页面wx.switchTab({url: `/${this.data.list[event.detail].pagePath}`,})},}})

store.js文件：（公共数据文件）

// store.js文件/* 创建store实例对象：* observable 中添加字段、计算属性、方法等* 计算属性：用get定义，（ 且只读，不能修改 ）* action方法：修改store中的值*/import {observable,action} from 'mobx-miniprogram'export const store = observable({// 字段/数据store_count1: 1,store_count2: 2,tabbar_active_index: 0, // tabbar选中的下标// 计算属性：用get定义，（只读不能修改）get store_count_sum() {return this.store_count1 + this.store_count2},// action方法：用来修改store中的值update_storecount1: action(function (step) {this.store_count1 += step}),// 更新tabbar选中下标update_Tabbar_active_index: action(function (activeIndex) {this.tabbar_active_index = activeIndex})})

如果觉得《小程序 自定义tabbar + 自定义tabbar样式 + tabbar切换激活样式问题》对你有帮助，请点赞、收藏，并留下你的观点哦！