uniapp tabbar 动态切换

Uniapp 中的 tabbar 可以通过设置 `selected` 属性来实现动态切换。具体步骤如下：

1. 在页面中定义一个 `tabbar` 组件，并设置 `selected` 属性的初始值：

<template>
  <div>
    <!-- 其他页面内容 -->
    <tabbar :selected="selected">
      <tabbar-item icon="home" text="首页"></tabbar-item>
      <tabbar-item icon="search" text="搜索"></tabbar-item>
      <tabbar-item icon="setting" text="设置"></tabbar-item>
    </tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 0, // 初始选中的 tabbar 项
    };
  },
};
</script>

2. 在需要切换 `tabbar` 的事件中，修改 `selected` 属性的值：

<template>
  <div>
    <!-- 其他页面内容 -->
    <tabbar :selected="selected">
      <tabbar-item icon="home" text="首页" @click="selectTab(0)"></tabbar-item>
      <tabbar-item icon="search" text="搜索" @click="selectTab(1)"></tabbar-item>
      <tabbar-item icon="setting" text="设置" @click="selectTab(2)"></tabbar-item>
    </tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 0, // 初始选中的 tabbar 项
    };
  },
  methods: {
    selectTab(index) {
      this.selected = index;
    },
  },
};
</script>

通过以上步骤，就可以实现动态切换 `tabbar` 了。