uni-app tabBar在app上无法显示
uni-app tabBar在app上无法显示
产品分类
uniapp/App
PC开发环境
- 操作系统：Windows
- 版本号：win10
HBuilderX
- 类型：正式
- 版本号：4.29
手机系统
- 系统：Android
- 版本号：Android 13
- 厂商：小米
- 机型：redmi k40
页面类型
- vue
- vue版本：vue3
打包方式
- 云端
项目创建方式
- HBuilderX
App下载地址
下载地址: https://app.liuyingyong.cn/build/download/27f25d60-a7a7-11ef-95dd-df2d6bc45304
示例代码
{
"easycom": {
"custom": {
"u-city-select": "@/components/u-city-select/u-city-select.vue",
"geek-(.*)": "@/components/geek-xd/components/geek-$1/geek-$1.vue",
"gx-(.*)": "@/components/geek-xd/components/geek-$1/geek-$1.vue",
"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue",
"qiun-(.*)": "@/components/qiun-data-charts/components/qiun-$1/qiun-$1.vue"
}
},
"pages": [
{
"path": "pages/index",
"style": {
"navigationBarTitleText": "首页",
//"navigationStyle": "custom",
"titleNView": false
}
},
{
"path": "pages/login",
"style": {
"titleNView": false,
"navigationBarTitleText": ""
}
},
{
"path": "pages/book",
"style": {
"titleNView": false
},
"needLogin": true
},
{
"path": "pages/mycls",
"style": {
"titleNView": false
},
"needLogin": true
},
{
"path": "pages/mine",
"style": {
"navigationBarTitleText": "我的",
"titleNView": false
},
"needLogin": true
},
{
"path": "pages/common/webview/index",
"style": {
"navigationBarTitleText": "浏览网页"
}
},
{
"path": "pages/common/textview/index",
"style": {
"navigationBarTitleText": "浏览文本"
}
},
{
"path": "components/aliyun/send-phone-code/send-phone-code",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages_oep/index",
"style": {
//"navigationBarTitleText": "oep",
"titleNView": false
}
}
],
"subPackages": [
{
"root": "pages_mine/pages",
"pages": [
{
"path": "avatar/index",
"style": {
"navigationBarTitleText": "修改头像"
}
},
{
"path": "info/index",
"style": {
"navigationBarTitleText": "个人信息"
},
"needLogin": true
},
{
"path": "info/edit",
"style": {
"navigationBarTitleText": "编辑资料"
},
"needLogin": true
},
{
"path": "pwd/index",
"style": {
"navigationBarTitleText": "修改密码"
},
"needLogin": true
},
{
"path": "setting/index",
"style": {
"navigationBarTitleText": "应用设置"
},
"needLogin": true
},
{
"path": "help/index",
"style": {
"navigationBarTitleText": "常见问题"
}
},
{
"path": "about/index",
"style": {
"navigationBarTitleText": "关于我们"
}
}
]
},
{
"root": "pages_template/pages",
"pages": [
{
"path": "wxCenter/index",
"style": {
"navigationBarTitleText": "wxCenter 仿微信个人中心",
"navigationStyle": "custom"
}
},
{
"path": "keyboardPay/index",
"style": {
"navigationBarTitleText": "keyboardPay 自定义键盘支付"
}
},
{
"path": "mallMenu/index2",
"style": {
"navigationBarTitleText": "mallMenu-商城分类"
}
},
{
"path": "mallMenu/index1",
"style": {
"navigationBarTitleText": "mallMenu-商城分类"
}
},
{
"path": "coupon/index",
"style": {
"navigationBarTitleText": "coupon-优惠券"
}
},
{
"path": "login/index1",
"style": {
"navigationBarTitleText": "美团登录"
}
},
{
"path": "login/index2",
"style": {
"navigationBarTitleText": "水滴登录"
}
},
{
"path": "citySelect/index",
"style": {
"navigationBarTitleText": "城市选择"
}
},
{
"path": "submitBar/index",
"style": {
"navigationBarTitleText": "提交订单栏"
}
},
{
"path": "comment/index",
"style": {
"navigationBarTitleText": "评论"
}
},
{
"path": "comment/reply",
"style": {
"navigationBarTitleText": "评论详情"
}
},
{
"path": "order/index",
"style": {
"navigationBarTitleText": "订单"
}
},
{
"path": "login/code",
"style": {
"navigationBarTitleText": "登录获取验证码"
}
},
{
"path": "address/index",
"style": {
"navigationBarTitleText": "用户地址"
}
},
{
"path": "address/addSite",
"style": {
"navigationBarTitleText": "添加用户地址"
}
}
]
},
{
"root": "pages_qiun/pages",
"pages": [
{
"path": "sport/index",
"style": {
"pageOrientation": "auto"
}
},
{
"path": "school/index",
"style": {
"pageOrientation": "auto"
}
},
{
"path": "finance/index",
"style": {
"pageOrientation": "auto"
}
},
{
"path": "main/index",
"style": {
"pageOrientation": "auto"
}
}
]
},
{
"root": "pages_geek/pages",
"pages": [
{
"path": "index/index"
},
{
"path": "code/index"
}
]
}
],
"tabBar": {
"color": "#000000",
"selectedColor": "#FF6453",
"borderStyle": "white",
"backgroundColor": "#ffffff",
"fontSize": "20rpx",
"iconWidth": "40rpx",
"height": "90rpx",
"list": [
{
"pagePath": "pages/index",
"iconPath": "static/images/tabbar/home.png",
"selectedIconPath": "static/images/tabbar/home_.png",
"text": "首页"
},
{
"pagePath": "pages/book",
"iconPath": "static/images/tabbar/book.png",
"selectedIconPath": "static/images/tabbar/book_.png",
"text": "约课"
},
{
"pagePath": "pages/mycls",
"iconPath": "static/images/tabbar/mycls.png",
"selectedIconPath": "static/images/tabbar/mycls_.png",
"text": "课表"
},
{
"pagePath": "pages/mine",
"iconPath": "static/images/tabbar/mine.png",
"selectedIconPath": "static/images/tabbar/mine_.png",
"text": "我的"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#FFFFFF"
}
}
操作步骤
- 试过各种手段就没有正常过
预期结果
- 如浏览器
实际结果
- tabBar图标文字都没显示
Bug描述
2 回复
在uni-app中，tabBar是用于在应用的底部导航栏显示标签页的功能。如果在APP上无法显示tabBar，这通常是由于配置问题或者代码错误导致的。以下是一些可能的原因及解决方法，通过代码示例来展示如何正确配置tabBar。
1. 检查pages.json配置
首先，确保你的pages.json文件中正确配置了tabBar。以下是一个基本的tabBar配置示例：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/list/list",
"style": {
"navigationBarTitleText": "列表"
}
}
],
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/icons/home.png",
"selectedIconPath": "static/icons/home-active.png"
},
{
"pagePath": "pages/list/list",
"text": "列表",
"iconPath": "static/icons/list.png",
"selectedIconPath": "static/icons/list-active.png"
}
]
}
}
2. 确保页面路径正确
检查list数组中的pagePath是否与pages数组中的path相匹配。路径错误是导致tabBar无法显示的常见原因之一。
3. 图标路径
确保iconPath和selectedIconPath指向的图片资源路径是正确的。如果路径错误或图片资源不存在，tabBar也会无法显示。
4. 条件编译
如果你在使用条件编译（如#ifdef APP-PLUS），确保tabBar配置没有被错误地排除在APP平台的编译之外。
5. 清理缓存和重启
有时候，开发工具的缓存可能会导致配置不生效。尝试清理开发工具缓存并重启。
6. 检查控制台输出
运行APP时，查看控制台输出是否有任何错误信息。错误信息可以帮助你快速定位问题。
通过上述步骤，你应该能够诊断并解决uni-app中tabBar无法显示的问题。如果问题仍然存在，可能需要检查更详细的代码或配置，或者考虑是否有其他第三方插件或代码影响了tabBar的显示。
