uniapp子页面tabbar

uniApp（又名Dcloud）是一款基于Vue.js的跨平台应用开发框架，它允许开发者构建一次，多端部署。在uniApp中，TabBar是一个常见的组件，主要用于底部导航栏，用于在子页面之间切换。TabBar通常包含若干个固定的标签项，每个标签对应着一个子页面或者功能模块。

在uniApp项目中，设置子页面TabBar的步骤如下：

1. **配置TabBar**: 在`pages.json`文件中为需要展示的子页面配置对应的标签。例如：

{
  "pages": [
    {
      "path": "pages/index/index",
      "window": true,
      "tabBar": {
        "text": "首页",
        "iconPath": "path/to/home-icon.png",
        "selectedIconPath": "path/to/home-selected-icon.png"
      }
    },
    {
      "path": "pages/detail/detail",
      "tabBar": {
        "text": "详情页",
        "iconPath": "path/to/detail-icon.png",
        "selectedIconPath": "path/to/detail-selected-icon.png"
      }
    }
  ]
}

2. **引用TabBar组件**: 在每个子页面的`<template>`标签内，使用`<uni-tabbar>`组件来显示底部导航栏。

<template>
  <view>
    <!-- 子页面内容 -->
    <uni-tabbar :current="currentIndex" @change="tabBarChange">
      <!-- TabBar配置项列表 -->
      <uni-tabbar-item icon-type="custom" :active-color="#00BB86" :disabled-color="#ccc" v-for="(item, index) in tabBarItems" :key="index">
        <view>{{ item.text }}</view>
      </uni-tabbar-item>
    </uni-tabbar>
  </view>
</template>
<script>
export default {
  data() {
    return {
      currentIndex: 0,
      tabBarItems: [
        // 根据配置的pages.json填充
      ]
    };
  },
  methods: {
    tabBarChange(index) {
      this.currentIndex = index;
    }
  }
};
</script>