【小程序】底部导航菜单tabBar示例（图文+代码）

敦厚的曹操

已于 2022-04-26 11:34:16 修改

阅读量2.4k

点赞数 1

分类专栏： 0.【小程序】文章标签：小程序 javascript 前端

于 2022-01-18 09:33:34 首次发布

本文链接：https://blog.csdn.net/dxnn520/article/details/122553158

版权

0.【小程序】专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了小程序中app.json文件的TabBar配置方法，包括如何设置TabBar的颜色、背景颜色及选中状态的颜色等。同时展示了如何指定各Tab页面路径、文字描述、图标路径等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：如果图片或文件名不存在或不正确，在真机调试预览的时候看不到图标和菜单。

app.json代码

{
  "pages": [
    "pages/index/form",
    "pages/index/button",
    "pages/index/swiper",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ccc",
    "navigationBarTitleText": "邯郸一卡通",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#11cd6e",
    "borderStyle":"black",
    "backgroundColor":"#f2f2f2",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "pages/images/首页（黑）.png",
        "selectedIconPath": "pages/images/首页（绿）.png"
      },
      {
        "pagePath": "pages/index/form",
        "text": "表单",
        "iconPath": "pages/images/首页（黑）.png",
        "selectedIconPath": "pages/images/首页（绿）.png"
      },
      {
        "pagePath": "pages/index/swiper",
        "text": "轮播图",
        "iconPath": "pages/images/首页（黑）.png",
        "selectedIconPath": "pages/images/首页（绿）.png"
      },
      {
        "pagePath": "pages/index/button",
        "text": "按钮",
        "iconPath": "pages/images/首页（黑）.png",
        "selectedIconPath": "pages/images/首页（绿）.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}