微信小程序-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相同的話第二個也一樣沒有效果。

 

最後效果圖：