uni-app 实现 APP 上的 tab 选项卡

在uni-app中实现APP上的tab选项卡功能，可以使用uni-app自带的tabBar配置。tabBar是一个常用的组件，用于在APP底部展示导航选项卡。以下是一个完整的示例，展示了如何在uni-app中实现tab选项卡功能。

1. 配置 pages.json

首先，在pages.json文件中配置tabBar选项。这里我们定义三个选项卡：首页、分类和购物车。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/category/category",
      "style": {
        "navigationBarTitleText": "分类"
      }
    },
    {
      "path": "pages/cart/cart",
      "style": {
        "navigationBarTitleText": "购物车"
      }
    }
  ],
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "static/tabbar/category.png",
        "selectedIconPath": "static/tabbar/category-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tabbar/cart.png",
        "selectedIconPath": "static/tabbar/cart-active.png"
      }
    ]
  }
}

2. 创建页面文件

确保在pages目录下创建对应的页面文件，例如index/index.vue、category/category.vue和cart/cart.vue。这些页面文件可以包含各自页面的内容。

3. 添加图标资源

在static/tabbar目录下添加对应的图标文件，例如home.png、home-active.png、category.png、category-active.png、cart.png和cart-active.png。这些图标分别用于表示选项卡的默认和选中状态。

4. 运行项目

配置完成后，使用HBuilderX或其他支持uni-app的开发工具运行项目。你会在APP底部看到三个选项卡，点击不同的选项卡会跳转到相应的页面。

通过上述步骤，你可以轻松地在uni-app中实现APP上的tab选项卡功能。这种方法利用了uni-app自带的tabBar配置，简化了开发过程，同时保证了良好的用户体验。