uniapp 底部导航tabBar---循环获取刷新的数字角标

本文讲述了如何在Vue应用中通过全局App.vue监听tabBar页面传参,实现消息的定时刷新和tabBar角标管理,避免在非tabBar页面引发错误。同时,作者分享了在onHide生命周期钩子中处理消息更新的方法和优化建议。

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

整体思路

        在全局 App.vue 中定义一个定时刷新消息的方法,然后通过uni.$on()监听对应点击的  tabBar页面 所传参数,进行判断执行对应的操作。当你在 tabBar页面 时,会通过uni.$emit()传参(获取并刷新最新消息),当你切换到 非tabBar页面 时,onHide 取消监听(停止获取消息)。


说明:为什么不全局app控制底部tab消息数量的刷新显示呢?

        因为当前页面非tab时,可是会报错的哦!也就是下面的报错(下面图是借用的,懒的改代码截图报错了,体谅一下)

错误原因:

        因为当你使用uni.setTabBarBadge设置角标或者红点时,必须在tabBer页面设置,当你跳转到非tabBer页面时就会出现报错。

        你可能会说:那怎么办呢?

        我:耐心的看下去哦,为了你那不报错的代码。


一. 在 app.vue 入口文件 created函数中,设置uni.$on('N

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

亭瞳^

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

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

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

打赏作者

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

抵扣说明:

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

余额充值