300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 微信小程序底部导航栏tabBar及不显示问题解决记录

微信小程序底部导航栏tabBar及不显示问题解决记录

时间:2019-04-26 12:41:30

相关推荐

微信小程序底部导航栏tabBar及不显示问题解决记录

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]的第一个页面路径,所以这里最简单的方法就是把它们改成一致。

我只遇到这个问题,所以这样配置好代码以后就正常显示底部导航了,如下:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。