小程序 tabBar菜单

tabBar 介绍

• 文档地址：
• https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

1. tabBar 就是小程序底部的导航菜单，
2. 小程序的 tabBar 使用比较简单，
3. 只需要在全局配置文件`app.json`中加上下面的配置即可

tabBar 案例

• 参考代码：

{
    "tabBar": {
        "color": "color",
        "selectedColor": "selectedColor",
        "list": [
          {
            "pagePath": "pagePath",
            "iconPath": "iconPath",
            "selectedIconPath": "selectedIconPath",
            "text": "text"
          },
          {
            "pagePath": "pagePath",
            "iconPath": "iconPath",
            "selectedIconPath": "selectedIconPath",
            "text": "text"
          },
        ]
    }
}

• 目录结构：

• 所用图片：

• 实际代码（app.json文件）：

{
  "pages": [
    "pages/index/index",
    "pages/gengduo/gengduo"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "流星的小程序",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2",
  "tabBar": {
    "color": "#000",
    "selectedColor": "#eee",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "./images/cookbook.png",
        "selectedIconPath": "./images/cookbook-active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/gengduo/gengduo",
        "iconPath": "./images/menu.png",
        "selectedIconPath": "./images/menu-active.png",
        "text": "更多"
      }
    ]
  }
}

• 运行结果：

• 注意点：

1. pages数组中的默认页面（第一个元素）一定要出现在tabbar配置的list数组中，如果没有则底部菜单是不显示的；
2. 如果默认页面在菜单的list数组中，但是不是list数组的一个元素，那么默认页面在第一个元素，那个菜单就会被默认选中；
3. 正常来讲，pages数组中的第一个元素（页面），即菜单list数组中的第一个栏目；