uniapp实现底部消息小红点提示，使用uni.setTabBarBadge设置底部菜单的红点

最新推荐文章于 2024-04-15 17:31:31 发布
最新推荐文章于 2024-04-15 17:31:31 发布
阅读量812 收藏 11
点赞数 8
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61819802/article/details/134987515
版权

实现效果：

代码实现：  使用uni.setTabBarBadge和uni.removeTabBarBadge来进行对红点的设置和移除。

功能描述：无论点击底部的哪个菜单栏，都可以看到第三个菜单栏下显示的小红点。

如果只在消息提醒当前页面设置的话，当你在消息提醒的页面中调用uni.setTabBarBadge方法设置红点后，切换到首页的页面时，是无法看到消息提醒的的红点的。

解决方法：以上代码在消息提醒和首页都添加上

dandan_6
关注
  • 8
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
自定义底部菜单 CommonTabLayout带消息提示小红点和消息数量提示
07-14
自定义底部菜单 CommonTabLayout带消息提示小红点和消息数量提示
UNIAPP原生TABBAR设置并添加数字角标或小红点提示
qq_51463650的博客
02-09 8235
UNIAPP原生TABBAR设置并添加数字角标或小红点提示。1. 在页面加载的时候调用。2. 支付宝开发者工具上面的红点样式比较丑，但是不用调整。真机调试样式会准确些也相对好看。
uni原生导航栏相关设置
最新发布
qq_43628158的博客
04-15 783
uni原生导航栏相关API设置
uni-app 设置tabBar的setTabBarBadge购物车/消息等角标
m0_49714202的博客
12-06 1981
uni-app 设置tabBar的setTabBarBadge购物车/消息等角标
【底部消息红点提示】uniapp开发小程序时，使用uni.setTabBarBadge设置底部菜单的红点
weixin_48596030的博客
07-07 3272
解决方法：如果希望在第一个菜单栏的页面中看到第二个菜单栏的红点，需要在第一个菜单栏的页面中手动调用uni.getTabBarBadge方法获取第二个菜单栏的红点状态，然后根据返回的结果来显示相应的红点。方法设置红点后，切换到第一个菜单栏的页面时，是无法看到第二个菜单栏的红点的。如果只在人脉当前页面设置的话，当你在第二个菜单栏的页面中调用。，才能保证一进入小程序首页，可以直接看到人脉处有无红点。来进行对红点的设置和移除。
【uni-app】 动态设置 tabBar
热门推荐
loyd3的博客
04-27 1万+
uni.setTabBarItem(OBJECT) 动态设置 tabBar 某一项的内容 uni.setTabBarItem({ index: 0, text: 'text', iconPath: '/path/to/iconPath', selectedIconPath: '/path/to/selectedIconPath' }) uni.setTabBarStyle(OBJECT) 动态设置 tabBar 的整体样式 uni.setTabBarStyle({ color: '#F
Android实现消息提醒小红点效果
08-28
Android实现消息提醒小红点效果 Android 消息提醒小红点效果是 android 应用程序中常用的交互方式之一，这种效果可以吸引用户的注意力，提高应用程序的交互性和友好性。下面将详细介绍 Android 实现消息提醒小红点...
Android带数字或红点的底部导航拦和联网等待加载动画示例
08-31
在 Android 中，实现消息提醒红点可以使用 TextView 或 ImageView 等控件，并使用背景图片或颜色来实现红点效果。 在上面的示例中，我们可以看到一个消息提醒红点的示例，使用了 TextView 来显示红点，并使用背景...
IOS开发过程中的消息通知--小红点
08-30
然而，有时开发者可能需要更加灵活的自定义方式来实现小红点。在这种情况下，可以通过创建一个UIImageView并设置其图像为小红点图标，然后将其添加到需要显示的位置。例如： ```swift let dotImage = UIImageView...
uni-app setTabBarBadge在非tabBar页面设置时无法生效
weixin_43923958的博客
09-04 9638
项目场景： uniapp中使用vuex来保存userInfo，userInfo中含有购物车数量的值，在setUserInfo方法中中进行判断 if (Number(state.userInfo.cartGoodsNum) > 0) { uni.setTabBarBadge({ index: 2, text: String(state.userInfo.cartGoodsNum), complete(e) { console.log(e);
2.uniapp之设置小技巧
ITbearer的博客
01-08 742
使用uniapp 通常会遇到进入详情页，需要修改标题文字，uniapp自带的方法就可以修改代码如下： uni.setNavigationBarTitle({ title:this.i18n.user.title }); 1.修改底部tabar uni.setTabBarItem({ index: 0, tex...
uni-app学习--生命周期和API
weixin_47938715的博客
07-28 569
uni-app生命周期
在uniapp中引入uni-badge组件来实现消息提醒
qq_44866810的博客
05-23 1605
在uniapp中使用默认的tabBar，需要在页面中引入uni-badge组件来实现消息提醒的需求。
uniapp——添加购物车数据以及删除购物车数据
NanChen的博客
01-14 2208
detail.vue中添加 app.vue dodelgoods({ commit, state }) { $H({ url: '/cart/delete', method:'POST', data: { shop_ids: state.selectedAll.join(',') }, header: { token: true } }).then(res => ...
uni-app学习笔记之tabBar角标
紫微斗数学习交流
12-28 860
//tabBar uni.showTabBar() uni.hideTabBar() //右上角显示文字 uni.setTabBarBadge({ index: 1, text: "99" }) //右上角显示红点 uni.showTabBarRedDot({ index: 2 }) uni.hideTabBarRedDot({ index:2 }) ...
{“errMsg“:“setTabBarBadge:fail not TabBar page“}
黎小小的博客
06-28 3134
问题描述：想要在详情页添加商品到购物车后，同时更新tabBar页面的购物袋徽标。错误信息：{"errMsg":"setTabBarBadge:fail not TabBar page"}错误原因：设置徽标必须在当前页面设置，所以设置tabBar购物袋页面徽标也必须在购物袋页面才能设置。
uni-app 底部导航栏tabBar设置角标、红点
spring_007_999的博客
12-20 1559
uniapp给底部导航栏动态设置角标或者红点
uni.setTabBarBadge 在非 tabbar 页面上更新无效问题
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
12-20 1353
官方建议使用缓存，可以将购物车的有效数量通过 vuex 的 getters 进行实时计算。在每一个 tabbar 页面时都使用 onShow 钩子来将最新的购物车数量更新到 tabbar 角标 使用方式
uniapp 实现QQ消除小红点（一键退朝）效果
08-11
在uni-app中实现QQ消除小红点（一键退朝）效果，可以通过以下步骤来实现： 1. 首先，在uni-app中使用uni.navigateToMiniProgram API来跳转到QQ小程序。使用该API可以在当前小程序中打开另一个小程序。 2. 然后，在QQ小程序中创建一个用于显示小红点的组件，并在需要显示小红点的地方使用该组件。 3. 在uni-app中，可以通过调用uni.startPullDownRefresh API来触发下拉刷新事件。可以将下拉刷新事件与消除小红点的动作绑定在一起。 4. 在QQ小程序中的相关页面中，监听下拉刷新事件，并在事件触发时执行消除小红点的操作。可以使用uni.stopPullDownRefresh API来停止当前页面的下拉刷新。 通过以上步骤，就可以实现在uni-app中实现QQ消除小红点（一键退朝）效果。希望对您有所帮助！123 #### 引用[.reference_title] - *1* *2* *3* [uniapp学习总结](https://blog.csdn.net/weixin_67850938/article/details/131229095)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值