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

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

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"
}