微信小程序底部导航栏——tabBar

微信小程序底部导航栏——tabBar

---

微信小程序底部导航栏是一个常见的基础的功能，下面就让我们一起来探索吧！

首先上图：完成之后就是这样的效果

对于底部导航栏，小程序上给出的文档要求里面的item最少2个，最多五个。

首先在项目中找到这个文件

话不多说上代码：

 "tabBar": {
    "selectedColor":"#33a3dc", 
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/home.png",
        "selectedIconPath": "/images/home1.png"
      },
      {
        "pagePath": "pages/position/position",
        "text": "职位",
        "iconPath": "/images/position.png",
        "selectedIconPath": "/images/position1.png"
      },
      {
        "pagePath": "pages/news/news",
        "text": "消息",
        "iconPath": "/images/news.png",
        "selectedIconPath": "/images/news1.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "/images/mine.png",
        "selectedIconPath": "/images/mine1.png"
      }
    ]
  },

tabBar：指底部的 导航配置属性。

selectedColor：选择时 底部导航文字的颜色。

list：导航配置数组。

pagePath ：页面访问地址。

text：导航图标下方文字

iconPath：未选择时 图标路径。

selectedIconPath：选中时 图标路径。

---

                                                  谢谢鉴赏