微信小程序-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相同的话第二个也同样没有效果。

最后效果图：