解决微信小程序tabBar不显示的问题
学习微信小程序,给小程序添加tabBar后,tabBar但始终不显示。
app.json如下:
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/users/users"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"tabBar": {
"position":"top",
"color":"#fff",
"selectedColor": "#333",
"backgroundColor":"#eee",
"list": [{
"pagePath": "pages/logs/logs",
"text": "logs"
}, {
"pagePath":"pages/users/users",
"text":"user"
}]
}
}
搜索了一下,发现tabBar显示需要满足:pages数组里配置的第一项为启动进来的首页,此路径需要配置在tabBar的list里。
解决方法:
方法一、在tabBar的list里添加pages第一项的路径。如例子里添加tab为pages/index/index
"list": [{
"pagePath": "pages/index/index",
"text": "index"
},{
"pagePath": "pages/logs/logs",
"text": "logs"
}, {
"pagePath":"pages/users/users",
"text":"user"
}]
方法二、在tabBar里配置的tab选择其中一个路径放置在pages数组的第一项。如把pages/logs/logs放在pages数组的第一项。
"pages": [
"pages/logs/logs",
"pages/index/index",
"pages/users/users"
],
按方法一最后修改的app.json为:
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/users/users"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"tabBar": {
"position":"top",
"color":"#fff",
"selectedColor": "#333",
"backgroundColor":"#eee",
"list": [{
"pagePath": "pages/index/index",
"text": "index"
},{
"pagePath": "pages/logs/logs",
"text": "logs"
}, {
"pagePath":"pages/users/users",
"text":"user"
}]
}
}