【微信小程序自学之路】tabBar底部导航栏

微信小程序 底部导航栏

小程序底部导航栏是小程序非常常见而且基础的元素,下面我们看下如何添加

app.json

我们来看下小程序的全局配置 app.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{
"pages": [
"pages/index/index",
"pages/userConsole/userConsole",
"pages/storageConsole/storageConsole",
"pages/databaseGuide/databaseGuide",
"pages/addFunction/addFunction",
"pages/deployFunctions/deployFunctions",
"pages/chooseLib/chooseLib",
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "云开发 QuickStart",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#0a0a0a",
"selectedColor": "#08bf62",
"borderStyle": "white",
"backgroundColor": "#f8f8f8",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "images/footer-list.png",
"selectedIconPath": "images/footer-list-selected.png",
"text": "首页"
},
{
"pagePath": "pages/userConsole/userConsole",
"iconPath": "images/footer-user.png",
"selectedIconPath": "images/footer-user-selected.png",
"text": "我"
}
]
}
}

如上,tabBar 是我们新增的 tabBar底部导航栏 的配置,我们来逐步解释

color     底部导航上的文字颜色
selectedColor     被选中的底部导航栏上文字颜色
borderStyle     导航栏的边框颜色,只能是 white 或者 black
backgroundColor     导航栏的背景颜色
list     导航栏上的列表数据,其中:
pagePath     导航项跳转的page模块
iconPath     导航项的默认图标路径
selectedIconPath     导航项被选中时使用的图标路径
text     导航项上的文字

如此,我们就可以在小程序下看到导航


小程序tabBar
坚持原创技术分享,谢谢鼓励我继续创作!