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

微信的开发文档里有，很多人也写了，自己写一遍，加深印象罢！

在学习Android的时候，被模仿一个app的界面，实现其UI。而一般来说，总是避免不了导航栏的。

比较大众化的，就是底部导航栏啦，而实现的方式也是非常的多，如：Fragment+ViewPage Or 来一个RadioGroup Or 以前的TabHost 等~

效果，是一样或差不多的，而实现手法，是五花八门特色鲜明的！

在微信小程序中，可以说是，一统江山了吧，扔出了一个tabBar~

emmm..没错，你需要做的是：找一个漂亮的图片，给一个导航名，然后选个好看的颜色，再一一对应即可。

就好比，之前学习Android的时候，学的是手动挡的车。现在接触微信小程序，就好比开着自动挡的车~

那效果是怎么样的呢？

先建两个目录，待会我们跳转用！

在app.json中，别忘了要添加目录！

好，干正事！

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

emmm...这里“list”里，现在只有一个标签的内容，我们来三个吧！

差点忘了我们要放图标~那怎么把图片放进来呢？

 在目录里建立文件夹，然后放入图片，开发工具就会自动更新了，关于图标，可以直接去网上搜 阿里巴巴图标库 ，丰富的图标供你下载！

补全代码：

  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "微笑",
      "iconPath": "pages/index/img/Smile.png",
      "selectedIconPath": "pages/index/img/Smile_select.png"
    },
    {
      "pagePath": "pages/tabOne/tabOne",
      "text": "购物车",
      "iconPath": "pages/index/img/cart.png",
      "selectedIconPath": "pages/index/img/cart_select.png"
    },
    {
      "pagePath": "pages/tabTwo/tabTwo",
      "text": "所有",
      "iconPath": "pages/index/img/all.png",
      "selectedIconPath": "pages/index/img/all_select.png"
    }]
  }

正如刚刚的图：

不过好像字木有变化哦！

还要添加一行代码！

就完成啦！

即使是自动挡的车，那不仅仅要会打方向、踩油门，还要了解每个按钮的作用，这样开起车来，才更得心应手！

“菜是原罪！”

学习，需要再加把劲！