1,首先需要新建一个目录images来保存相关导航图标,如下图:
2,在app.json文件中对tabBar进行配置(注意字母大小写不要写错,图片路径不要写错)
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#11cd6e",
"borderStyle": "white",
"list": [
{
"selectedIconPath": "images/test_hall.png",
"iconPath": "images/test_hall.png",
"pagePath": "pages/index/index",
"text": "商城"
},
{
"selectedIconPath": "images/test_shoplist.png",
"iconPath": "images/test_shoplist.png",
"pagePath": "pages/databaseGuide/databaseGuide",
"text": "清单"
},
{
"selectedIconPath": "images/test_user.png",
"iconPath": "images/test_user.png",
"pagePath": "pages/deployFunctions/deployFunctions",
"text": "用户"
}
]
}
3,配置好以后我遇到了不显示图标的问题,造成问题的原因是app.json中pages的页面路径中的第一个路径不是tabBar配置中list[0]的第一个页面路径,所以这里最简单的方法就是把它们改成一致。
我只遇到这个问题,所以这样配置好代码以后就正常显示底部导航了,如下: