关于小程序开发tabbar页面显示的相关问题及解决整理

昨天在微信小程序的开发过程中，遇到一个情况，明明已经定义好tabbar了，却总是不显示。在网络上搜索发现在微信小程序的开发过程中如果有使用过tabbar的同学，很多也遇到同样的

困扰。为什么有些时候代码中明明已经在app.json里面增加了tabbar，可以页面中就是不显示呢？可不可以有些页面显示tabbar，而有些页面不显示tabbar呢？

今天我把我在开发过程中遇到的问题整理出来跟大家分享一下小程序开发教程。

很多网友（包括我自己）也遇到过此类问题，我想提醒大家好好想想检查一下是否书写正确！正确书写时tabBar，不要写成tabbar！如果确定书写正确，在app.json里面明明加了tabbar，list里面

也加了路径怎么就是不显示呢？举例，如下代码，为什么屏幕页面底部没有如期出现tabbar呢？

"pages":[

"pages/clickDemo/clickDemo",

"pages/logs/logs",

"pages/index/index",

"pages/mypage/mypage"

],

"window": {

"backgroundTextStyle": "dark ",

"navigationBarBackgroundColor": "#ddd",

"navigationBarTitleText": "Tabbar Demo",

"navigationBarTextStyle": "black",

"backgroundColor": "#ff0000"

},

"tabBar": {

"color": "#000000",

"borderStyle": "#000",

"selectedColor": "#9999FF",

"list": [

{

"pagePath": "pages/index/index",

"text": "首页",

"iconPath": "image/location_normal.png",

"selectedIconPath": "image/location_selected.png"

},

{

"pagePath": "pages/logs/logs",

"text": "设置",

"iconPath": "image/setting_normal.png",

"selectedIconPath": "image/setting_selecred.png"

}

]

}

}

我们看一下页面的显示结果如下：


原因是：pages数组的第一项必须是tabBar的list数组的一员。
我们可以看看上面代码中的pages数组的内容是：

"pages":[

"pages/clickDemo/clickDemo",

"pages/logs/logs",

"pages/index/index",

"pages/mypage/mypage"

tabbar中list数组内容是：

"list": [

{

"pagePath": "pages/index/index",

"text": "首页",

"iconPath": "image/location_normal.png",

"selectedIconPath": "image/location_selected.png"

},

{

"pagePath": "pages/logs/logs",

"text": "设置",

"iconPath": "image/setting_normal.png",

"selectedIconPath": "image/setting_selecred.png"

}

是不是发现为什么底部不出现TabBar？原因在于，app.json头部的pages数组的第一项"pages/clickDemo/clickDemo"没有成为tabBar的一员，也就是在tabBar的list数组内没有链接click

Demo页面的条目。
【解决办法1】.我们在list数组内加入链接clickDemo页面的条目，下面给出了这段代码。

{

"pagePath": "pages/clickDemo/clickDemo",

"text": "事件Demo",

"iconPath": "image/setting_normal.png",

"selectedIconPath": "image/setting_selecred.png"

}

效果如下：