TabBar的uniapp应用

在UniApp中，TabBar是一个组件，它允许你在应用程序的底部展示一系列固定的选项，每个选项代表一个页面或功能区。它对于构建单页或多页面的用户界面非常有用，特别是在支持Webview或者H5页面的应用中。

创建 UniApp 中的 TabBar 需要在 App.json 或者 WXML 文件中配置。以下是基本的步骤：

1. **App.json 配置**：
- 添加一个 `tabs` 标签，定义各个 Tab 的标题、路由路径和图标等信息。

   {
     "pages": [
       // 其他页面...
     ],
     "window": {
       "backgroundTextStyle": "light",
       "navigationBarBackgroundColor": "#fff",
       "navigationBarTitleText": "默认标题",
       "enablePullDownRefresh": false,
       "tabBar": {
         "color": "#606060",
         "selectedColor": "#3e95cd",
         "borderStyle": "black",
         "list": [
           {"pagePath": "index", "text": "首页", "iconPath": "path/to/home-icon.png"}
           // 更多Tab配置...
         ]
       }
     }
   }

2. **WXML 使用**：
在相应的WXML文件里，你可以在 `<template>` 标签内引入 `uni-tabbar` 组件，然后渲染配置好的列表项。

<view class="container">
  <uni-tabbar :options="tabBarOptions" @select="tabSelect"></uni-tabbar>
</view>

<script>
export default {
  data() {
    return {
      tabBarOptions: [{ text: '首页', pagePath: '/pages/index/index' }, ...]
    };
  },
  methods: {
    tabSelect(index) {
      this.$route.push({ name: tabBarOptions[index].pagePath });
    }
  }
}
</script>