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

最后效果图：

巴特西

微信小程序-TabBar功能实现

最新文章

热门文章