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

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

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

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

 

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

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

 

话不多说上代码：

"tabBar": {
    "selectedColor":"#33a3dc",
    "list" : [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/image/home.png",
        "selectedIconPath": "/image/home1.png"
      },
      {
        "pagePath": "pages/strategy/strategy",
        "text": "攻略",
        "iconPath": "/image/strategy.png",
        "selectedIconPath": "/image/strategy1.png"
      },
      {
        "pagePath": "pages/personal/personal",
        "text": "个人中心",
        "iconPath": "/image/personal.png",
        "selectedIconPath": "/image/personal1.png"
      }
    ]
  },

 

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

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

list：导航配置数组。

pagePath ：页面访问地址。

text：导航图标下方文字

iconPath：未选择时 图标路径。

selectedIconPath：选中时 图标路径。