微信小程序 底部导航—tabBar

代码示例图如下：

在app,json页面pages配置中代码如下：

"pages": [
    "pages/home/home",
    "pages/hot/hot",
    "pages/my/my",
  ],

---

在小程序根目录app.json文件中进行配置如下代码块

"tabBar": {
   "list": [
      {
        "iconPath": "static/tabbar/home.png",
        "pagePath": "pages/home/home",
        "selectedIconPath": "static/tabbar/home.png",
        "text": "首页"
      },
      {
        "iconPath": "./static/tabbar/hot.png",
        "pagePath": "pages/hot/hot",
        "selectedIconPath": "./static/tabbar/hot.png",
        "text": "热搜"
      },
      {
        "iconPath": "./static/tabbar/my.png",
        "pagePath": "pages/my/my",
        "selectedIconPath": "./static/tabbar/my.png",
        "text": "我"
      }
    ]
  },

tabBar配置参数

• color 文字默认颜色

• selectedColor 文字选中时的颜色

• backgroundColor 背景色

• borderStyle 边框的颜色

• list tab 的列表，详见list属性说明，最少 2 个、最多 5 个 tab

• position 位置，仅支持 bottom / top

• custom 自定义 tabBar

• pagePath 页面路径，必须在 pages 中先定义

• text tab 上按钮文字

• iconPath 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片
  position 为 top 时，不显示 icon

• selectedIconPath 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。