Bottom navigation bar of this function is a very common feature, basically a complete app, there will be a navigation bar, then the micro-channel navigation bar applet how to achieve it? After numerous stepped pit, finally realized, well, take a look at renderings.
For the bottom of the navigation bar, the document is given a small program requires a minimum of two inside the item, up to five.
Well, take a look at the code:
Find this file in the project
1 {
2 "pages":[
3 "pages/index/index",
4 "pages/logs/logs",
5 "pages/mine/mine"
6
7 ],
8 "window":{
9 "backgroundTextStyle":"light",
10 "navigationBarBackgroundColor": "#fff",
11 "navigationBarTitleText": "首页",
12 "navigationBarTextStyle":"black"
13 },
14
15 "tabBar": {
16 "color": "#a9b7b7",
17 "selectedColor": "#11cd6e",
18 "borderStyle": "black" ,
19 "list": [{
20 "selectedIconPath": "images/icon_consult_press.png",
21 "iconPath": "images/icon_consult.png",
22 "pagePath": "pages/index/index",
23 "text": "首页"
24 }, {
25 "selectedIconPath": "images/icon_invest_press.png",
26 "iconPath": "images/icon_invest.png",
27 "pagePath": "pages/logs/logs",
28 "text": "一元投"
29 },{
30 "selectedIconPath": "images/icon_mine_press.png",
31 "iconPath": "images/icon_mine.png",
32 "pagePath": "pages/mine/mine",
33 "text": "我的"
34 }
35 ]
36 }
37 }
Here I will explain what is the meaning of these attributes:
tabBar navigation configuration attribute refers to the bottom of the
When the bottom of the navigation text color is not a color selection
selectedColor bottom selected text color when navigating
borderStyle bottom of the navigation border-like color (Note that if the style is not written on the navigation box border will lead to the default light gray stripes appear)
list navigation configuration array
selectedIconPath selected icon path
iconPath icon path is not selected
pagePath page access address
text navigation icon below the text
It should be noted that some minor issues:
1, each page json file can not be removed navigationBarTitleText this property. Otherwise it will error
2、
"Pages and the": [ 3 "Pages and the / index / index", 4 "Pages and the / logs / logs", 5 "Pages and the / Mine / Mine" 6 7],
registration of this page must pay attention to, if the first is certainly the most the first show, there would not see the bottom navigation.