小程序tabBar底部导航详细介绍

几乎每个app都会用到底部导航的，相对于小程序而言自然也是如此了。小程序的底部导航tabBar写起来相对没有那么复杂。只要在app.json中配置就好了。

注意：tabBar至少两个最多五个item选项

tabBar的主要属性：

tabBar中每个item的属性如下：

当然官网中也有详细说明：

最后是tabBar在app.json中的应用实例：

{
  "pages":[
    "pages/index/index",
    "pages/fans/fans",
    "pages/shopCart/shopCart",
    "pages/mine/mine",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#353535",
    "navigationBarTitleText": "小程序",
    "navigationBarTextStyle":"#fff"
  },
  "tabBar": {
    "color": "#666666",
    "selectedColor": "#ff4a4a",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "img/home.png",
      "selectedIconPath": "img/home_slt.png"
    },{
      "pagePath": "pages/fans/fans",
      "text": "粉丝",
      "iconPath": "img/fans_merchant.png",
      "selectedIconPath": "img/fans_merchant_slt.png"
    },{
      "pagePath": "pages/shopCart/shopCart",
      "text": "购物车",
      "iconPath": "img/shopping_cart.png",
      "selectedIconPath": "img/shopping_cart_slt.png"
    },{
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "img/mine.png",
      "selectedIconPath": "img/mine_slt.png"
    }]
  }
}

这样就可以运用底部了。O(∩_∩)O