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

发布于 1周前 作者 h691938207 来自 Uni-App

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

无相关信息

1 回复

在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.vuecategory/category.vuecart/cart.vue。这些页面文件可以包含各自页面的内容。

3. 添加图标资源

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

4. 运行项目

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

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

回到顶部