uni-app tabbar切换时，下个界面onShow方法不执行

最新推荐文章于 2024-02-17 16:08:13 发布
最新推荐文章于 2024-02-17 16:08:13 发布
阅读量5.2k 收藏
点赞数 1
分类专栏： vue 文章标签： java uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pqd_qingdong/article/details/121014686
版权

uni-app tabbar切换时，上个页面onShow未执行完，下个界面的onShow不执行

问题
  最近在开发时发现，因为业务的问题，pageA的onShow里有大量的网络请求代码，执行完耗时大概2s。
在底部栏的tabbar切换时，从page A  -> pageB， 如果切换的快，pageA的onShow方法未执行完，
则pageB的onShow也不会执行，猜测是uni-app对onShow的管理是一个线程。
思路 1
   pageA里的onshow方法中，业务逻辑全部替换成异步
   结果: 失败，未执行完进行切换pageB中onshow任不会执行
思路 2
 在pageA的onShow方法末尾，调用pageB的onShow方法
 结果: 未找到实现方法，放弃

最后无奈，只能放弃，在业务层面妥协
如果有大神知道怎么处理 ，还望多多指教

麦林炮手_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app框架 tabBar（底部导航）创建的方法与外界跳转
01-20
tabBar: { color: #cdcdcd, selectedColor: #39cffc, borderStyle: black, backgroundColor: #ffffff, list: [{ pagePath: pages/home/home, iconPath: static/home.png, selectedIconPath: static/homeClick.png, text: 首页 }, { pagePath: pages/home/
uni-app 子组件中onLoad、onShow里的方法不执行
New_leng的博客
07-11 3063
uniapp生命周期
uniapp 自定义组件内部onload、onshow函数不运行问题
m0_58889179的博客
04-15 6121
解决方法：在methods中定义一个盛放onload和onshow中代码的函数（函数名：onLoadMethod）。在父组件显示该组件时通过ref调用子组件onLoadMethod方法。原因：在uniapp中，只有应用生命周期（项目生命周期）和页面生命周期，而onLoad和onShow属于页面的生命周期函数，所以组件中不会调用。问题：将写的页面代码，以组件形式展示时，组件中onLoad和onShow代码失效。
uniapp微信小程序开发踩坑日记：onShow的应用场景及用法
最新发布
lbcbjtlhmjq的博客
02-17 1982
由于微信小程序是单页应用程序，所以用户在打开小程序后，只有第一次进入页面时会加载页面，之后再通过导航栏切换到相同的页面并不会导致页面重新加载但是在某些场景下，我们希望每次用户一回到某个页面，就执行相应的函数，但因为导航栏切换页面并不会导致页面重新加载，所以页面中的代码不会被再次执行如果大家和我一样使用vue3开发，可能会想到使用vue3的生命周期函数onMounted，但同样地，导航栏切换页面也不会导致dom元素重新渲染，所以onMounted并不会执行。
源码uni-app 微信小程序根据角色动态的更改底部tabbar
03-24
1.包含小程序完整项目流程 2.两个角色切换登录 3.登录，登录记录，账号注册，选择公司，存取记录，授权名单，项目列表，盘点，盘点柜子，储物仓列表，我的等功能页面源码。 4.智慧仓储小程序，学习使用，禁止直接商用
uni-app-tabbar:uni-app底部初步实现（不支持小程序）
03-19
uni-app-tabbar uni-app底部逐步实现（不支持小程序），请使用真机调试ok app效果图如下： 安装包如下：
uniapp开发页面onShow()里面赋值不生效
m0_59722227的博客
11-23 1649
最近在开发一个小程序+h5项目的时候遇到了一个问题,就是onshow()钩子函数中赋值的时候在小程序环境生效,但在h5的时候没生效,之前一直觉得可能是页面缓存问题,但查看文档和百度之后是onShow()这个函数本身就有问题.上辈子杀人放火,这辈子写前端适配...
uniapp组件里的onLoad和onShow里的方法不执行
m0_68683769的博客
03-28 2743
uniapp生命周期函数不生效、uniapp中onShow的应用、this.$router.push onShow、uniapp页面生命周期、uniapp路由守卫、uniapp中onShow只执行一次
『uniapp』自定义组件 onLoad/onShow 函数不执行问题
ReturnTmp的博客
11-08 2914
在uniapp中，只有应用生命周期和页面生命周期，子组件是没有应用周期的。所以onLoad、onShow都不存在。onLoad是页面函数，不是组件函数。子组件中的onLoad和onShow函数不执行。
uniapp 子组件中onLoad、onShow里的方法不执行
weixin_43453621的博客
10-09 929
如果想在渲染子组件时运行一些方法，可以用vue自身的。
微信小程序自定义tabBar在uni-app的适配详解
10-16
主要介绍了微信小程序自定义tabBar在uni-app的适配详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uniapp中，生命周期函数不生效
ywzgq的博客
09-28 2618
今天发现在uniapp的项目中，定义的onShow和onLoad的函数，在H5端可以正常console.log 在小程序端没有办法进行 代码如下 onShow() { console.log("开始执行onshow"); const app = getApp() console.log(app.globalData) }, 实际上，正确的写法应该是 onShow:functi...
uni-app的h5页面的onHide/onUnload方法不触发的问题解决
qq_44242707的博客
02-28 5299
【代码】uni-app的h5页面的onHide/onUnload方法不触发的问题解决。
页面生命周期onShow没有触发
华为开发者联盟
07-23 3881
现象描述： 通过router.push接口跳转到快应用的B页面，当B页面只是引用一个自定义组件XX的时候，B页面的onShow生命周期无法触发。如下图所示： 代码如下： B页面代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 2...
uniapp之 onShow、onPullDownRefresh 等不生效 使用 mounted 设置定时器
HQ\(^o^)/的博客
01-06 2401
因项目的需求，我需要 在某个页面 设置定时器，我这个定时器之所以使用 vue生命周期中的mounted以及是因为 此页面是个 子组件 暂不支持 小程序中的 onShow、 onUnload 以及 onHide 页面生命周期因此代码如下别忘了在 data 里面要定义 timer ： null} else {}, 0)console.log('刷新', +new Date());},
uni-app中onLoad、onShow等函数无效
热门推荐
zlsjune123的博客
04-07 1万+
#初学uni-app，遇到onLoad()等函数无效 开发uni-app时，在组件中的页面使用onLoad()、onShow()等函数时，无法正确初始化。 查找官网文档，发现这些函数只能用于page中的vue页面，在组件中是无法使用的。无奈之下，只能使用mounted函数进行组件的初始化。 对于官网文档的研究还不够仔细。下不为例。 （mounted函数存在延迟，即当前组件加载后，如果想要实时更新页...
uni-app小程序onShow执行两次；微信小程序onShow重复执行原因；导航栏tabBar页的onLoad函数不执行；App.vue页的onShow执行原因；onShow莫名其妙执行
i_am_a_div的博客
10-11 7132
1.从任何页面返回到tabBar页面，都不会触发tabBar页面的onLoad函数； 2.只有三种情况会触发导航栏tabBar页的onLoad函数，分别是： –2.1：首次进入到导航栏tabBar页面； –2.2：从微信分享进入的导航栏tabBar页面； –2.3：使用了uni.reLaunch后，点击返回首页按钮，到的首页，页会触发首页的onLoad函数 ...
uni-popup如何遮挡住uniapp自带的tabbar
06-06
要想在uni-app中使用uni-popup组件遮挡住tabbar，可以使用如下方法： 1. 在App.vue中设置一个变量isTabBar，用来控制tabbar的显示和隐藏： ``` <template> <div> <uni-popup v-if="showPopup"></uni-popup> <tabbar v-if="isTabBar"></tabbar> </div> </template> <script> export default { data() { return { isTabBar: true, showPopup: false } } } </script> ``` 2. 在需要弹出popup的页面中，设置isTabBar为false，这样就能够遮挡住tabbar了： ``` <template> <div> <button @click="showPopup = true">弹出popup</button> </div> </template> <script> export default { data() { return { showPopup: false } }, onShow() { this.$parent.isTabBar = false; }, onHide() { this.$parent.isTabBar = true; } } </script> ``` 注意：在页面切换时要及时修改isTabBar的值，避免页面跳转后tabbar未能及时显示或隐藏的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值