微信小程序无法正常显示tabBar
一、问题
在编写微信小程序的时候,我们的相关配置“完全正确
”的前提之下,微信小程序的tabBar不能正常显示
。
如下图:
二、解决思路
- 查看一下我们的tabBar中引用的页面是否已经注册到了pages中,若这个页面没有注册,则应 改及时调整,注册页面到pages中;
- 如果页面已经注册了,仍然没有显示,那么需要看一下页面应用的路径是否出现了错误,如果有则要纠正,没有的话,就看下面的解决方法;
tabBar中的页面路径在pages中的排序(推荐先检查这个)
三、解决方法
解决方法:
将tabBar页面文件
的路径放到非tabBar页面
路径上面
。
3.1 无法正常显示
app.json
配置文件(不能正常显示
的情况):
{
//页面创建
"pages":[
//非tabBar页面
"pages/index/index",
"pages/logs/logs"
//tabBar页面
"pages/home/home",
"pages/msg/msg",
],
//tabBar菜单选项配置
"tabBar": {
"position": "bottom",
"borderStyle":"black",
"color": "#75878a",
"selectedColor": "#f00056",
"backgroundColor": "#f0f0f4",
"list": [{
"pagePath": "pages/home/home",
"text": "主页",
"iconPath": "/icon/tabBar/home1.png",
"selectedIconPath": "/icon/tabBar/home2.png"
},
{
"pagePath": "pages/msg/msg",
"text": "消息页面",
"iconPath": "/icon/tabBar/msg1.png",
"selectedIconPath": "/icon/tabBar/msg2.png"
}]
}
}
//配置项文件中不能有注释
注意:
tabBar的页面必须放到所有页面的前面
,否则无法显示tabBar如下列代码,若将
"pages/home/home"和"pages/msg/msg"
tabbar页面放到"pages/index/index","pages/logs/logs"
之后则无法显示tabBar菜单选项。
3.2 正常显示
app.json
配置文件(正常显示
的情况):
{
//页面创建
"pages":[
//tabBar页面
"pages/home/home",
"pages/msg/msg",
//非tabBar页面
"pages/index/index",
"pages/logs/logs"
],
//tabBar菜单选项配置
"tabBar": {
"position": "bottom",
"borderStyle":"black",
"color": "#75878a",
"selectedColor": "#f00056",
"backgroundColor": "#f0f0f4",
"list": [{
"pagePath": "pages/home/home",
"text": "主页",
"iconPath": "/icon/tabBar/home1.png",
"selectedIconPath": "/icon/tabBar/home2.png"
},
{
"pagePath": "pages/msg/msg",
"text": "消息页面",
"iconPath": "/icon/tabBar/msg1.png",
"selectedIconPath": "/icon/tabBar/msg2.png"
}]
}
}
//配置项文件中不能有注释