微信小程序-TabBar功能实现

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

来看看app.json代码：

 1 {
 2   "pages":[
 3     "pages/index/index",
 4 
 5     "pages/sale/sale",
 6 
 7     "pages/shop/shop",
 8 
 9     "pages/user/user",    
10 
11     "pages/logs/logs"
12   ],
13   "window":{
14     "backgroundTextStyle":"white",
15     "navigationBarBackgroundColor": "#fff",
16     "navigationBarTitleText": "WeApp",
17     "navigationBarTextStyle":"black",
18     "backgroundColor": "#F2f2f2",
19     "enablePullDownRefresh": true
20   },
21   "tabBar": {
22     "color": "#ddd",
23     "selectedColor": "#1296db",
24     "borderStyle": "white",
25     "backgroundColor": "#f2f2f2",
26     "list": [{
27       "pagePath": "pages/index/index",
28       "text": "首页",
29       "iconPath": "images/home.png",
30       "selectedIconPath": "images/home-fill.png"
31     },{
32       "pagePath": "pages/sale/sale",
33       "text": "商品",
34       "iconPath": "images/sale.png",
35       "selectedIconPath": "images/sale-fill.png"
36     },{
37       "pagePath": "pages/shop/shop",
38       "text": "购物车",
39       "iconPath": "images/shop.png",
40       "selectedIconPath": "images/shop-fill.png"
41     },{
42       "pagePath": "pages/user/user",
43       "text": "我",
44       "iconPath": "images/user.png",
45       "selectedIconPath": "images/user-fill.png"
46     }
47     ]
48   }
49 }

 

注意：

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

 

最后效果图：

 

 

posted @ 2017-01-12 15:54  月亮邮递员  阅读(5930)  评论(0)  编辑  收藏  举报