uniapp底部导航栏如何实现

“在uniapp中如何实现底部导航栏功能？我按照官方文档配置了pages.json，但导航栏不显示，请问具体需要哪些步骤？是否需要额外引入组件？自定义图标和选中状态要怎么设置？求详细实现方法。”

2 回复

在uniapp中，可通过pages.json配置tabBar实现底部导航。需设置list数组，包含页面路径、图标和文字。注意页面路径需在pages中预注册，且tabBar最多5个项。示例：

"tabBar": {
  "list": [{
    "pagePath": "pages/index/index",
    "text": "首页"
  }]
}

在 UniApp 中，可以通过配置 pages.json 文件实现底部导航栏（TabBar）。以下是详细步骤和示例代码：

实现步骤：

  1. 在 pages.json 中配置 TabBar：
    在 globalStyle 同级或内部添加 tabBar 字段，定义导航栏样式和页面路径。

  2. 配置属性说明：

    • color：未选中时的文字颜色。
    • selectedColor：选中时的文字颜色。
    • backgroundColor：导航栏背景色。
    • list：导航项数组，每个项需包含：
      • pagePath：页面路径（需在 pages 中注册）。
      • text：显示文字。
      • iconPath：未选中图标路径。
      • selectedIconPath：选中图标路径。

示例代码：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/category/category",
      "style": {
        "navigationBarTitleText": "分类"
      }
    },
    {
      "path": "pages/cart/cart",
      "style": {
        "navigationBarTitleText": "购物车"
      }
    },
    {
      "path": "pages/user/user",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ],
  "tabBar": {
    "color": "#333333",
    "selectedColor": "#007AFF",
    "backgroundColor": "#FFFFFF",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tab-home.png",
        "selectedIconPath": "static/tab-home-active.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "static/tab-category.png",
        "selectedIconPath": "static/tab-category-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tab-cart.png",
        "selectedIconPath": "static/tab-cart-active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "static/tab-user.png",
        "selectedIconPath": "static/tab-user-active.png"
      }
    ]
  }
}

注意事项：

  • 图标建议使用 PNG 格式，尺寸推荐 50x50 像素。
  • list 最少配置 2 个、最多 5 个导航项。
  • 页面路径必须在 pages 数组中首位注册，否则可能不显示。

保存配置后，重新运行项目即可看到底部导航栏效果。

回到顶部