如何在uni-app小程序中制作底部导航栏（TabBar）

原创已于 2025-06-28 19:06:52 修改 · 1.3k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-28 18:59:27 首次发布

在开发uni-app小程序时，底部导航栏（TabBar）是用户界面设计中不可或缺的一部分。它不仅提供了一种直观的方式来切换不同的页面，还能增强用户体验。本文将详细介绍如何在uni-app中创建和自定义底部导航栏，并通过图文并茂的方式展示实现过程。

1. 配置TabBar

在uni-app中，底部导航栏的配置主要在pages.json文件中进行。这是一个示例配置：

{
  "tabBar": {
    "backgroundColor": "#FFFFFF",
    "color": "#8a8a8a",
    "selectedColor": "#4b0082",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "static/tabBar/home.png",
        "selectedIconPath": "static/tabBar/home-on.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "static/tabBar/category.png",
        "selectedIconPath": "static/tabBar/category-on.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tabBar/cart.png",
        "selectedIconPath": "static/tabBar/cart-on.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "static/tabBar/user.png",
        "selectedIconPath": "static/tabBar/user-on.png"
      }
    ]
  }
}

如何在uni-app小程序中制作底部导航栏（TabBar）

在开发uni-app小程序时，底部导航栏（TabBar）是用户界面设计中不可或缺的一部分。它不仅提供了一种直观的方式来切换不同的页面，还能增强用户体验。本文将详细介绍如何在uni-app中创建和自定义底部导航栏，并通过图文并茂的方式展示实现过程。可参照官网DCloud - 数字天堂官网、HBuilderX、HBuilder、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架https://dcloud.io/

1. 配置TabBar

在uni-app中，底部导航栏的配置主要在pages.json文件中进行。这是一个示例配置：

JSON

复制

{
  "tabBar": {
    "backgroundColor": "#FFFFFF",
    "color": "#8a8a8a",
    "selectedColor": "#4b0082",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "static/tabBar/home.png",
        "selectedIconPath": "static/tabBar/home-on.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "static/tabBar/category.png",
        "selectedIconPath": "static/tabBar/category-on.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tabBar/cart.png",
        "selectedIconPath": "static/tabBar/cart-on.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "static/tabBar/user.png",
        "selectedIconPath": "static/tabBar/user-on.png"
      }
    ]
  }
}

2. 解释配置项

backgroundColor: 导航栏的背景颜色，这里设置为白色（#FFFFFF）。
color: 未选中的图标和文字颜色，这里设置为灰色（#8a8a8a）。
selectedColor: 选中的图标和文字颜色，这里设置为深紫色（#4b0082）。
list: 导航栏的列表项，每个列表项包含以下属性：
- pagePath: 页面路径，用户点击时跳转的页面。
- text: 显示的文字，这里是导航栏上显示的标签。
- iconPath: 未选中时的图标路径，这里是导航栏图标的默认状态。
- selectedIconPath: 选中时的图标路径，这里是导航栏图标的选中状态。

3. 图标和图片准备

在static目录下，你需要准备每个TabBar项的图标和选中状态的图标。例如：

static/tabBar/home.png：未选中的首页图标。
static/tabBar/home-on.png：选中的首页图标。

确保这些图标文件已经正确放置在项目的static目录中。图标的设计应该简洁明了，以便用户能够快速识别。

4. 运行和测试

完成配置后，运行你的uni-app项目，你将看到底部导航栏已经按照配置显示。点击不同的图标，可以切换到相应的页面，并且图标和文字的颜色会根据选中状态改变。

5. 自定义样式

如果你需要进一步自定义TabBar的样式，可以通过CSS来实现。例如，你可以在App.vue或相应的页面中添加样式：

/* 自定义TabBar样式 */
.tabbar {
  background-color: #f8f8f8;
}

.tabbar-item {
  color: #666;
}

.tabbar-item-selected {
  color: #ff0000;
}

然后在pages.json中引用这些样式：

{
  "tabBar": {
    "style": {
      "backgroundColor": "#f8f8f8",
      "color": "#666",
      "selectedColor": "#ff0000"
    },
    "list": [
      // 列表项配置
    ]
  }
}

6. 高级自定义

除了基本的样式自定义，你还可以通过编写JavaScript代码来实现更复杂的交互效果。例如，你可以监听TabBar的点击事件，并根据用户的操作执行特定的逻辑

// 在App.vue中监听TabBar点击事件
onTabBarClick(e) {
  if (e.index === 2) { // 假设点击的是第三个TabBar项
    // 执行特定的逻辑
    console.log('购物车被点击');
  }
}

7. 总结

通过以上步骤，你可以在uni-app小程序中轻松创建和自定义底部导航栏。TabBar不仅提供了用户友好的导航方式，还可以通过自定义样式来提升应用的视觉效果。希望这篇文章能帮助你更好地理解和使用uni-app的TabBar功能，让你的应用更加专业和用户友好。