微信小程序-TabBar功能实现

要实现tabbar的导航条其实很简单，我们要实现全局的tabbar只需要在app.json文件中定义即可，局部的就在局部的tabbar文件中实现。

来看看app.json代码：

{
  "pages":[
    "pages/index/index",

    "pages/sale/sale",

    "pages/shop/shop",

    "pages/user/user",    

    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"white",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeApp",
    "navigationBarTextStyle":"black",
    "backgroundColor": "#F2f2f2",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "#ddd",
    "selectedColor": "#1296db",
    "borderStyle": "white",
    "backgroundColor": "#f2f2f2",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/home.png",
      "selectedIconPath": "images/home-fill.png"
    },{
      "pagePath": "pages/sale/sale",
      "text": "商品",
      "iconPath": "images/sale.png",
      "selectedIconPath": "images/sale-fill.png"
    },{
      "pagePath": "pages/shop/shop",
      "text": "购物车",
      "iconPath": "images/shop.png",
      "selectedIconPath": "images/shop-fill.png"
    },{
      "pagePath": "pages/user/user",
      "text": "我",
      "iconPath": "images/user.png",
      "selectedIconPath": "images/user-fill.png"
    }
    ]
  }
}

注意：

pagePath、iconPath、selectedIconPath都必须设置正确，否则没有效果，2个item的pagePath相同的话第二个也同样没有效果。

最后效果图：