uniapp tabBard动态设置selectedIconPath

UniApp 的 TabBar 功能允许开发者动态设置 selectedIconPath，即选中状态下的图标路径。这是为了让用户界面更具交互性和个性化。要在 TabBar 中实现动态切换图标，你需要做以下几步：

1. 首先，在项目的 `pages.json` 文件中为每个 Tab 节点配置一个页面引用，并设置默认的 `selectedIconPath` 和 `pagePath`：

{
  "tabBar": {
    "color": "#fff",
    "selectedColor": "#007aff",
    "borderStyle": "#ccc",
    "list": [
      {
        "pagePath": "index",
        "text": "首页",
        "iconPath": "default_home_icon.png", // 默认未选中图标
        "selectedIconPath": "selected_home_icon.png", // 选中图标
      },
      // 其他 tab 节点...
    ]
  }
}

2. 在对应的组件（如 `index.vue`）中，你可以通过 Vue 的 `$emit` 或者 `watch` 监听某个数据变化（比如用户的登录状态、权限等），当条件满足时更新 `this.$store.state.tabBarIndex` 或者 `this.$route.meta.index`。这两个值通常用于对应 TabBar 的索引。

// 示例：假设有个变量 isLogin 表示用户是否已登录
watch("isLogin", function (val) {
  if (val) {
    this.$store.commit("setTabBarIndex", 0); // 设置第一个 tab 为选中状态
  } else {
    // 清除选中状态或其他处理
  }
});

3. 使用 Vuex 管理状态时，在 mutations 中更新 `selectedIconPath`：

mutations: {
  setTabBarIndex(state, index) {
    state.selectedIndex = index;
    // 如果你想直接改变 UI，可以在这里更改 TabBar 的 iconPath 属性
    state.list[index].selectedIconPath = state.list[index].selectedIconPath; // 指向正确的选中图标路径
  }
},

4. 最后，记得在 App 组件或者其他需要显示 TabBar 的地方，使用 `uni-app-router` 的导航守卫（navigationGuard）监听路由变化，以便及时更新 TabBar 的状态。

完成以上步骤后，每当触发相应的条件变化，TabBar 的当前项就会动态地更新其 selectedIconPath。记得检查图标文件是否放在了正确的资源目录下。