uniapp tabbar 浏览器调试显示 真机不显示

原创 已于 2023-11-13 11:34:59 修改 · 2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #前端 #真机不显示 #tabbar不显示

于 2023-08-16 10:19:20 首次发布
开发者在使用TabBar时遇到问题，需将所有单位从rpx改为px以确保显示，但可能导致适配问题。寻求兼容且适应不同平台的解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

解决方案，把tabBar里面的单位全改为px，rpx是不会显示的！

注意了，改完一定要重新运行，不然无效，坑爹

"tabBar": {
		"borderStyle": "black",
		"selectedColor": "#2563EB",
		"color": "#94A3B8",
		"height": "64px",
		"fontSize": "12px",
		"iconWidth": "24px",
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/images/icon_frame.png",
			"selectedIconPath": "static/images/icon_frame_active.png",
			"text": "首页"
		}, {
			"pagePath": "pages/exercise/index",
			"iconPath": "static/images/icon-square-bar.png",
			"selectedIconPath": "static/images/chart-square-bar_active.png",
			"text": "运动"
		}]
	}

真无语，可是用px就不能适配的啊，谁有更好的解决方案吗？

uniapp|原生控件层级过高无法覆盖的解决方案
前端程序员、项目经理、人工智能博主
06-25 1万+
简称nview，它是一个原生的类画布的控件，其实cover-view也是用plus.nativeObj.view封装的。这种方式被称为混合渲染。另外cover-view无论如何都无法解决原生导航栏、tabbar、web-view组件的覆盖，为此App端补充了2个层级覆盖方案plus.nativeObj.view和subNVue。但如果在pages.json里注册了原生导航栏和tabbar，nvue里的界面元素默认也无法覆盖这些，也需要plus.nativeObj.view或subNVue。
iOS开发：真机或者模拟器中，APP中的按钮文字下面自动出现下划线的问题的解决
全沾软贱开发攻城狮
07-17 1万+
有些时候在设置手机的时候，选择了一些不是很清楚的选项，会出现“意想不到”的效果,比如在真机测试或者是模拟器测试的时候，APP中按钮里面的文字下面会自动出现下划线，这是因为你在设置手机属性的时候，误开了设置按钮形状的属性,只需要手动关闭就行了，其实真机和模拟器的设置一样，都是在手机->设置->通用->辅助功能->按钮形状，然后关闭“按钮形状”按钮的开启状态即可，具体操作如下： 真机测试情况下：
uniapp微信小程序-底部tabBar颜色显示问题
qq_51185865的博客
01-10 1443
uniapp开发微信小程序时遇到底部tabBar文字颜色显示不正确的问题，排查后发现page.json文件内tabBar的颜色必须为Hex格式的才能正常显示。
uniapp tabBar 不显示图标问题
qq_33756292的博客
04-28 1406
uniapp tabBar 不显示图标问题
uniapp自定义底部导航栏h5有效果小程序无效的解决方案
qq_37996327的博客
05-07 704
uniapp自定义底部导航栏h5有效果小程序无效的解决方案
解决uniapp的tabBar不显示问题
qq_33756292的博客
04-27 4775
我用的是vue3开发的uniapp，参照官方文档在pages.json页面添加了tabBar节点，但是不管怎么刷新页面都不显示tabBar栏。由于我是控制台执行 npm run dev:h5 启动运行的，关掉cmd窗口，重新运行 npm run dev:h5，刷新页面就看到了。
关于UNI-APP tabbar无法显示的坑
u011685213的博客
07-29 7053
uniapp上开发小程序的时候，查看了官网的文档配置设置tabbar，编译完全没问题，但是始终显示不出来，最后经过排查发现很诡异的问题，具体原理后续再问问吧。先上代码： { "pages": [{ "path": "pages/login/login", "style": {} }, { "path":"pages/index/index", "style":{ "navigationBarTi...
解决uniapp调试时，浏览器调试正常但真机调试有底部空白tabbar的问题
qq_39210364的博客
06-10 1101
在自定义导航栏页面，页面开始时使用uniapp原生方法：uni.hideTabBar()
uniapp开发移动H5注意事项
weixin_51351053的博客
07-01 545
编译为H5版后生成的是单页应用，SPA。如果想要seo优化，首页可以在template模板中配置keyword。二级页不支持配置。但一个更酷的方式是用uni-app直接发布一版百度小程序，搜索权重更高。 编译后看日志和错误，要看浏览器的控制台，而不是HBuilderX的控制台。浏览器的控制台会有错误提示。 网络请求（request、uploadFile、downloadFile等）在浏览器存在跨域限制（CORS、Cross-Origin），解决方案详见：uni-app H5跨域问题解决方案（CORS、C
uniapp快速入门
javajy的博客
11-14 286
uniapp
uniapp入门超详细教程：如何从零开始搭建项目
热门推荐
weixin_51609337的博客
07-19 2万+
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。本次章节也是博主从零开始搭建uniapp项目，在此过程进行记录，帮助后续查询同时为读者提供讲解，如有异议，欢迎留言。uni-app官网。
uniapp 底部导航栏tabBar设置后不显示的问题——已解决
滴水石穿
10-25 7780
uniapp 底部导航栏tabBar设置后不显示的问题——已解决
uniapp[app端]tabBar图片不显示
qq_45625778的博客
11-17 1638
解决tabBar不显示
微信小程序，自定义tabbar，模拟器显示，真机演示不显示
weixin_51579731的博客
01-31 391
把skyline这玩意删了，就这破东西导致不显示。
uniapp tabbar不显示图标
f9999999995的博客
10-30 422
检查你的路径是否正确，重点检查文件夹名字大小写！网页和抖音小程序是忽略大小写的，如果大小写填的不正确也可以显示，但是iOS模拟器或者微信小程序是校验大小写的，必须正确的大小写填写，如果网页或者抖音小程序显示tabbar图标，其他的不显示，比如iOS模拟器微信小程序不显示图标。
uniapp底部导航栏的图片大小无法设置怎么办？
weixin_50606255的博客
07-30 6303
如果你不知道如何实现底部导航栏，可以参考文档https://blog.youkuaiyun.com/weixin_50606255/article/details/116270949 问题描述：当app运行到浏览器时，可以修改底部导航栏的图标样式来控制图标大小，但是再运行到真机时却发现底部导航栏根本没有改变 关于底部导航栏的图标，官方只有以下说明： 只是在图标尺寸上做出了建议，并没有属性可以直接控制图标大小，说明uniapp是根据图标尺寸来自适应的，当前解决问题的方式最快捷方便的就是让UI切合适的图标，我..
uniapp-插件NoticeBar 通告栏滚动显示不出来
陈小白
04-09 7838
我们通过uniapp的插件市场引入NoticeBar 引入之后 滚动之后发现文字不见了，通过检查代码样式发现，当它滚动的时候，内容的高度为0，既然知道了原因，那就解决了 在components找到源码文件 找到样式表，找到uni-noticebar__content--scrollable这个类名，在大约318行的位置中加上 height:100% 文字就...
uniapp h5 tabBar兼容IOS手机底部黑线
码农键盘上的梦
02-23 3349
因为我这边的tabbar导航栏是自己写的，不是用的uniapp自带的，所以如果遇到IOS手机底部有黑线的这种，需要将tabbar导航栏的高度调整一下才可以。app底部的tabbar 导航栏如果遇到IOS手机则会出现问题。一、pages.json文件中添加tarBar。[补充2：在app中$route找不到的问题]补充1：自定义switchTab跳转方法。uniapp自定义tabBar方案。二、把原生的tabBar隐藏起来。三、自定义一个tabBar组件。
uniapp 调试时页面正常显示，打包后页面空白，不显示
咦~地瓜
05-27 9315
uniapp 调试时页面正常显示，打包后页面空白，无法显示。
uniapp自定义底部tabbar微信小程序真机运行报错
最新发布
07-08
在使用 UniApp 开发微信小程序并自定义底部 `tabbar` 时，可能会遇到一些与兼容性、配置或运行环境相关的错误。以下是可能的解决方案和注意事项： ### 自定义底部 tabbar 的常见问题及解决方法 1. **确保正确引入自定义 tabbar 组件** 在 UniApp 中实现自定义底部 `tabbar` 时，通常需要创建一个独立的组件（如 `custom-tabbar.vue`），并在页面中引用该组件。确保组件路径正确，并且在页面中通过 `import` 引入并在 `components` 中注册。 ```vue <template> <view> <!-- 页面内容 --> <custom-tabbar /> </view> </template> <script> import CustomTabbar from '@/components/custom-tabbar.vue'; export default { components: { CustomTabbar } }; </script> ``` 2. **检查 app.json 配置文件是否关闭默认 tabbar** 如果希望完全自定义底部导航栏，应避免使用系统默认的 `tabbar` 配置。可以在 `app.json` 文件中删除或注释掉 `tabBar` 节点，以防止冲突 [^1]。 ```json { "pages": ["pages/index/index", "pages/logs/logs"], "window": { "navigationBarTitleText": "Demo" }, // "tabBar": { ... } // 禁用默认 tabbar } ``` 3. **适配真机运行中的样式和状态问题** 在某些情况下，模拟器无法准确反映真机上的行为，例如图标状态切换异常或布局渲染不一致。建议在开发过程中频繁使用**真机调试功能**，特别是在处理交互逻辑和动画效果时 [^2]。 4. **处理依赖缺失或编译错误** 如果在启动项目时出现类似 `regeneratorRuntime is not defined` 或 `xxx.js 找不到` 的错误，可能是由于依赖未正确加载或打包失败。可尝试以下操作： - 清理缓存后重新构建项目。 - 更新 HBuilderX 和相关插件版本。 - 检查 `unpackage` 目录下是否存在 `app.js` 和 `app.json` 文件 [^4]。 5. **使用 uView UI 框架进行自定义 tabbar 设计** uView 是一个专为 uni-app 设计的 UI 框架，支持跨平台开发，包括微信小程序。可以通过 uView 提供的 `u-tabbar` 组件快速构建自定义底部导航栏，并利用其内置的图标库和主题配置能力提升开发效率 [^3]。 ```vue <template> <u-tabbar :list="tabList" :mid-button="false"></u-tabbar> </template> <script> export default { data() { return { tabList: [ { iconPath: 'home.png', selectedIconPath: 'home_active.png', text: '首页' }, { iconPath: 'user.png', selectedIconPath: 'user_active.png', text: '我的' } ] }; } }; </script> ``` 6. **优化性能与交互体验** 自定义 `tabbar` 可能会影响页面切换流畅度或导致内存占用过高。建议对组件进行懒加载或使用 `v-if` 控制组件生命周期，避免不必要的渲染。 ---
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xl__qd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值