uniapp 菜单栏

uniapp 是一个基于 Vue.js 的跨平台开发框架，它可以帮助开发者快速构建出多端（如：iOS、Android、H5、小程序等）的应用程序。在 uniapp 中，可以使用内置的组件和 API 来实现菜单栏的功能。

菜单栏是一个常用的 UI 组件，通常用于导航和切换页面。在 uniapp 中，菜单栏可以通过内置的 tabbar 组件来实现。tabbar 组件可以在底部或顶部显示一组菜单项，每个菜单项通常对应着一个页面或一组相关页面。

使用 tabbar 组件时，需要在页面配置文件（如：pages.json）中设置 "tabBar" 字段，并定义菜单项的样式和跳转路径。同时，在每个要显示的页面中也需要设置对应的菜单项的索引值（即 tabBar 中定义的 list 数组中的索引值）。

以下是一个简单的例子：

// pages.json
{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-selected.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tabbar/cart.png",
        "selectedIconPath": "static/tabbar/cart-selected.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "个人中心",
        "iconPath": "static/tabbar/user.png",
        "selectedIconPath": "static/tabbar/user-selected.png"
      }
    ]
  }
}

// index.vue
<template>
  <view>
    <text>这是首页</text>
  </view>
</template>

<script>
  export default {
    onTabItemTap(item) {
      console.log(item.index) // 输出当前菜单项的索引值
    }
  }
</script>