uniapp底部导航栏组件

UniApp是一款基于Vue.js的跨平台应用开发框架，它支持快速构建原生体验的应用，包括iOS、Android等。底部导航栏组件在UniApp中是一个常见的页面布局元素，通常包含多个标签页，用于在不同功能模块间切换。

底部导航栏组件（BottomNavigation）的基本结构如下：
1. **标签项**（TabItem）：每个图标代表一个功能入口，点击后会跳转到相应的页面。
2. **标题**（Title）：显示在每个标签项上方，可以自定义文字内容。
3. **选中状态**：默认只有一个标签项会被高亮表示当前活跃页面。
4. **切换事件**：当用户点击其他标签项时，会触发对应的`on-item-click`事件，开发者可以根据这个事件处理页面切换逻辑。

使用底部导航栏组件的步骤：
1. 在`.vue`文件中导入`uni-bottom-nav`组件。
2. 定义各个`TabItem`，并设置`active`属性指定初始激活的标签项。
3. 配置事件处理器，如`on-item-click`来响应导航切换。

<template>
  <view class="container">
    <uni-bottom-navigator :options="bottomNavOptions" @itemClick="handleItemClick"></uni-bottom-navigator>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bottomNavOptions: [
        { text: '首页', path: '/home' },
        { text: '发现', path: '/discovery' },
        { text: '我的', path: '/mine' }
      ]
    };
  },
  methods: {
    handleItemClick(item) {
      this.$router.push(item.path);
    }
  }
};
</script>