今天,利用HBuilderx开发工具,测试uniapp的tabBar功能,遇到了tabBar显示问题。
根据各位学友们的文件分享,老老实实在pages.json文件中配置,代码如下:
{
"pages": [
//pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/camera/camera",
"style" :
{
//"navigationBarTitleText" : "调用摄像头拍照"
"navigationBarTitleText": "", //取消显示顶部导航栏
"navigationStyle": "custom"
}
},{
"path": "pages/album/album",
"style": {
"navigationBarTitleText": "", //取消显示顶部导航栏
"navigationStyle": "custom"
}
},{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"tabBar": {
"color": "black",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"position":"bottom",
"list": [
{
"pagePath": "pages/camera/camera",
"iconPath": "static/camera_not_active.png",
"selectedIconPath": "static/camera.png",
"text": "相机"
},
{
"pagePath": "pages/album/album",
"iconPath": "static/album_not_active.png",
"selectedIconPath": "static/album.png",
"text": "相册"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
添加完成后,利用HBuilderx的预览功能,tabBar怎们也不显示,查了很多遇到类似问题的文章,有的讲“pages”数组的第一个页面要求tabbar的第一个tab关联页面一致,有的讲“pages”数组至少要有两个页面,碰巧,我的都满足,还是不显示。
折腾近一个小时,没有解决问题,最后考虑是HBuilderx“预览”功能未刷新页面,所以关闭HBuilderx,重新打开,解决了问题,页面效果如下: