为什么自定义tabBar在模拟器中可以显示，在真机调试时就无法显示？

最新推荐文章于 2024-01-31 11:15:10 发布
最新推荐文章于 2024-01-31 11:15:10 发布
阅读量2.3k 收藏 2
点赞数 2
分类专栏： 微信小程序 小程序 文章标签： 微信小程序 页面加载 真机测试 tabbar跳转
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/biong188/article/details/104097860
版权

这是我在社区提出的问题：为什么自定义tabBar在模拟器中可以显示，在真机调试时就无法显示？

大概是我在写小程序登录时，想实现动态tabbar，然后通过登录信息来进行进行动态tabbar数据更新，因为我把tabbar数据写在了登录页，然后在登录的时候有时候会有tabbar，有时候没有，出现得很莫名其妙，毫无概率。

被卡在这里好久，今天突然想到，我人都傻了。

很简单的原因，就是并发，之前没有详细了解小程序的加载机制

原来在小程序真机登录加载过程中会同时加载所有页面，所以会在我写完数据的时候判断的时候其实登录页已经加载好了

详细的小程序页面加载：《你不知道的微信小程序页面加载顺序》

我的测试记录：

 

大概说明一下就是，数据在login页面加载的时候在页面ready和onload前后的加载顺序有区别

解决办法：增加中间层，在目的页和login页面增加中件加载缓冲页面层即可

 

 

crack_ff
关注
专栏目录
小程序组件tabbar在真机调试时显示不全
彭辛乾的专栏
03-05 2312
在app.json中配置如下： "tabBar": { "color": "#a9b7b7", "selectedColor": "#00BFFF", "borderStyle": "white", "list": [ { "selectedIconPath": "./images/tabbaricon/home2.png", ...
自定义TabBar
06-30
- 自定义TabBar时，需要考虑不同设备和屏幕方向的适配，确保在iPhone和iPad上，以及横屏和竖屏状态下都有良好的显示效果。 9. **响应式设计** - 为了让TabBar在不同状态下有不同的表现，可以使用Auto Layout或...
微信小程序自定义tabbar在开发者工具上显示，真机不显示问题
weixin_43623808的博客
11-15 3125
出现的问题是开发者工具上可以显示自定义tabbar，但是真机调试不显示 1.检查pages的配置前四个是不是tabbar在最前面 2.自定义tabbar的信息是否对应custom-tab-bar下的wxml文件和js文件 wxml： js: 与app.json中对应： 做到以上这些在真机运行一下 微信小程序在开发过程中的真机调试，有的时候不太靠谱，偶尔图片不显示，我做到以上这些之后第一次真机调试也还是不显示，但是过了2,3分钟我又试了一次发现出来了，也有可能一开始就是好的只是在打包上传真机调试的时
微信小程序，自定义tabbar，模拟器显示，真机演示不显示
weixin_51579731的博客
01-31 222
把skyline这玩意删了，就这破东西导致不显示。
Xcode7.2中storyboard能显示tab bar的图标真机测试不显示 解决办法
就是记录一下而已
03-23 863
**一开始是直接把图标素材填到tabbar自定义图标路径，结果只能storyboard显示运行时不显示（应该是需要各个尺寸图标才行）。google了很久，暂时用这个解决办法： 1、图片资源在Assets里加载1x 2x 3x，new一个Image Set 添加相应图片。 2、在storyboard bar itemimage填写Image Set名称。**
微信小程序丨tabBar模拟器显示没有问题，真机调试、预览少了一个tabBar
Gqiangqiang的博客
10-22 1086
在搭好基本的小程序结构后发现的一个小问题，在模拟器上看到的tabBar是没有问题的，所以也没有去管太多，后来使用手机预览的时候发现在手机上少了一个tabBar
自定义tabbar 例子
09-24
为了让TabbarItem在选中和未选中时有动态效果，我们可以在`CustomTabBar`类中监听`UITabBarDelegate`的`tabBar(_:didSelect:)`方法，然后根据当前选中的索引更新相关TabbarItem的状态。 5. **资源准备** 根据...
CustomTabbar:自定义tabbar+tabbarItem动画
05-16
10. **测试与调试**：最后，为了确保自定义tabbar在各种情况下都能正常工作，需要进行广泛的测试，包括模拟器和真机测试，以及不同设备和iOS版本的兼容性测试。 综上所述，CustomTabbar项目涵盖了Objective-C编程、...
自定义tabbar的功能 实现页面切换 按钮自定义回调
07-24
本教程将深入探讨如何实现自定义TabBar的功能，包括页面切换和按钮的自定义回调，确保应用在真机或模拟器上都能正常运行。 首先，我们需要了解TabBar的基本概念。TabBar是iOS中的一个组件，它位于屏幕底部，通常...
解决在自定义tabbar的时候出现双tabbar的问题
lixingqiao01的博客
07-04 3071
最近有个项目需要自定义tabbar， 我自定义tabbar的一个思路就是完全取代系统自带的tabbar，生成一个继承自UIview的customTabbar，将生成的customTabbar完全覆盖到tabbar上，为了让我们自己生成的tabbar也能使用系统的一些方法，我们需要将customTabbar添加到系统的tabbar上，这就是我的一个大概思路(后期再添加自定义的相关逻辑和代码) 在
微信小程序自定义tabBar的踩坑实践记录
01-18
微信官方文档对自定义 tabBar 的阐述较为潦草，在开发自定义 tabBar 过程中我踩了很多坑，因此在此处做个总结。 我使用 Vant Weapp 作为 UI 组件库，下面以此组件库为例。 定义 tabBar 创建自定义 tabBar 文件 创建一个与 /pages 的同级目录，命名为  /custom-tab-bar，注意目录层级与目录命名问题，不可用其他名称命名。 在 /custom-tab-bar 下创建四个文件： index.js index.json index.wxml index.wxss index.js 在 index.js 中我们定义相关数据： active：
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
分享互联网的有趣知识~
11-09 8841
微信小程序自定义导航栏机型适配--底部Tabbar--view高度
微信小程序 PC端与手机端显示不一致之tabBar导航栏
dmyc1027的博客
05-25 2406
在编写微信小程序项目时，一开始为了显示出页面样式，我在app.json中，tabBar导航栏的list中设置了三个数组，对应三个导航块。但是三个导航块list中的pagePath设置为同一页面pagePath "tabBar": { "color": "#0094ff", "selectedColor": "#ff9400", "backgroundColor": "white", "borderStyle": "black",
swiftui动画之tab自定义切换动画_微信小程序之自定义导航
weixin_39522103的博客
10-27 223
背景在开始之前呢，先提示一下大家，这里所说的自定义导航指的是底部的tabbar！不要问我为什么，我也不知道。其实我个人是不推荐自定义tabbar的，但为什么我还是这么去做了呢？主要原因是我们的业务需要根据客群的不同展示不同的tabbar，如果用原生的tabbar是无法实现的。因此我们最后决定通过自定义的方式来实现。不想看文字也没事，看一下我的示意图你就知道需求了...╮(╯_╰)╭是不是秒懂！ 自...
小程序自定义TabBar 菜单栏显示不出
m0_60030986的博客
02-17 2055
先说结论： 1.调试基础库版本号不对——需要2.5.0以上 2.custom-tab-bar目录层级不对——需要放在根目录下，和pages同级别 解决问题之后来回顾： 用的是官方的tabbar代码片段，并根据实际修改了部分信息。理论上没有修改到关键的东西，并且因为没有报错信息，所以对于真新手小白本人来说真的一头雾水，不知道怎么去排查 网上找了很多资料，基本都是这个问题： app.json这个文件中，pages中的第一个页面和list中的第一个页面需要为同一个 后面终于看到一位暴躁姐的分
小程序跳转tabBar无效解决办法【switchTab before pages are registered】
菜菜的博客
05-20 1214
项目需求是进入小程序首先展示落地页，若已授权登录则跳转到小程序的tabBar首页，直接使用 wx.switchTab进行跳转有时候会失效，并提示以下信息：switchTab before pages are registered. 百度了解决办法，网上说把调试基础库调到最新的版本（工具-->项目详情-->调试基础库），调到2.11.0后依旧不生效。 最终解决办法：使用延...
【小程序】自定义tabbar踩坑
不忘初心，坚定道路！
04-30 1034
前言 最近做个小程序又用上了自定义tabbar，和上一次使用自定义tabbar已经间隔很久了，这次又踩了些新的经验。 自定义tabbar真机调试或者预览不显示 在开发工具上看一切正常，结果去真机调试或者预览就不显示了。 注意！真机调试不显示是正常情况，预览不显示就不正常，请使用预览查看自定义tabbar显示情况。只要预览能显示，那么发体验版在体验版就能看见。 如果2者都不显示，请注意是否使用了除CoverView与CoverImage以外的标签，如果使用这2以外的标签，是看不见效果，虽然开发工具那模拟
vant-tabbar 重复点击才能生效的问题
qq_49294271的博客
05-15 545
可以看到官方给出的event.detail的值是两部分 一个数字的标签和一个组合，可以完成页面的切换，再次点击才会有我们想要的标签，才能让图标发亮。第二三行是detail.name 标签的name，但并没有这个东西，这也是这个做法不合理的地方，用一行有问题的代码和原来有问题的代码来解决问题。在原有onchange新加的部分可以做到点击即亮的效果，第五行是detail的内容的name项，第四行是detail的全部内容，如果是原有的方式控制台输出。第一行是detail的标签。这是改变后的控制台输出。
微信小程序 14 真机调试和tabbar
小哞^同^学的技术博客
07-12 354
花生壳免费版：更加偏向于 数据库 和 远程的连接。 小米球Ngrok免费版：更加偏向于 http、https 的连接。我们的 接口 是 http 协议 的，所以 我们 用 小米球 Ngrok 就可以了。 里 写入 tabBar 这个配置。 我们 知道 这里的 list 是一个 数组，而它接收的 就是 每个 选中的块。......
如何在uni-app中创建自定义TabBar？
最新发布
09-07
在uni-app中创建自定义TabBar，你需要在页面的配置文件 `manifest.json` 中配置TabBar，并且通过编写相应的页面和组件代码来实现。具体步骤如下： 1. 打开 `manifest.json` 文件，找到 `app-plus` -> `distribute` -> `android` -> `permissions`，在这里可以配置TabBar的属性，比如颜色、选中项的图标等。 2. 在 `pages.json` 文件中配置TabBar。首先定义你需要显示的Tab页面，然后设置TabBar的列表。示例如下： ```json { "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/home.png", "selectedIconPath": "static/home_active.png" }, { "pagePath": "pages/logs/logs", "text": "日志", "iconPath": "static/logs.png", "selectedIconPath": "static/logs_active.png" }], "color": "#8f8f94", "selectedColor": "#007aff", "backgroundColor": "#ffffff", "borderStyle": "black" } } ``` 3. 自定义TabBar的样式和功能。你可以在页面中添加自定义的TabBar组件，通过监听点击事件，实现自定义的跳转和行为。 4. 编写自定义TabBar组件的样式和脚本，使用 `<view>`、`<image>` 等组件来布局你的TabBar，并通过绑定点击事件来实现页面跳转。 5. 在需要显示自定义TabBar的页面中引入并使用你的自定义TabBar组件。 通过上述步骤，你可以在uni-app中创建一个功能丰富、样式自定义的TabBar。确保在实际编码时检查各配置项的正确性和代码的可运行性。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值