【微信小程序】使用wx.setTabBarBadge()失效的问题_1

微信小程序wx.setTabBarBadge()失效问题
原创 已于 2024-08-17 14:31:51 修改 · 655 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #小程序 #javascript

于 2024-08-17 14:28:46 首次发布

微信小程序开发中遇到的问题记录_2

一、传入参数类型
wx.setTabBarBadge(text) 只能传入string ，如果传入Number，会设置失败。解决办法是text.toString()

二、wx.setTabBarBadge(text) 不能在非tabBar页面使用，这里指的是当前onload()的页面，也就是说getCurrentPages().length == 1这个条件成立才可以，不能在任何navigateTo()的页面使用，如果必须使用，解决办法如下：

使用全局变量或本地缓存暂存数据

将要修改的text存入app.globalData或本地缓存，在tabBar页面onShow()中进行setTabBarBadge,为确保及时更新，需要加到所有tabBar页面。具体实现如下：

onShow(){
   
   
	wx.setTabBarBadge({
   
   
		index:
最低0.47元/天 解锁文章
微信小程序显示tabbar的角标
kerryqpw的博客
05-16 6664
微信小程序显示tabbar的角标 底部导航栏的标签栏的都会有角标。 实现效果如下： 设置角标： wx.setTabBarBadge({ index: 0, text: '1' }) 取消角标： wx.setTabBarBadge({ index: 0 }) ...
微信小程序 为tabBar设置角标
weixin_44646763的博客
12-06 4210
微信小程序 为tabBar的某一项设置（文本/红点）角标
【微信小程序】使用wx.setTabBarBadge()失效的问题_2
yyyjs1的博客
08-17 533
这种解决方案比较优雅，但是，如果这个方法出现两次调用，同时执行异步，就会出现抢占问题，我们需要当我们跳转到tabBar页面时并不能保证哪个异步先后执行，所以，需要在新的调用中，停止以前的promise，但不幸的是，promise并没有取消功能，正如他的意思，成功或失败，他都会返回，只是早晚问题。这样，我们就不用promise，转而使用PromiseWithAbort 来实现异步，通过调用PromiseWithAbort.abort()实现异步的取消。,这是DOM中的规范，在微信小程序这里是不适用的。
微信小程序 在tabBar某一项的右上角添加文本（购物车数量）
憨虫子的博客
05-20 7606
首先我们在进入小程序后，肯定是通过用户授权并获取到用户的openID的，或者说至少有那么一个用户信息字段（比如在数据库中的用户表里，有openID、ID等）是跟购物车挂钩的，否则怎么能知道是我的购物车里有什么宝贝呢？在这里我是将用户表中的ID字段返回作为用户的唯一标识存储在globalData.userInfo中的。 在用户将商品添加到购物车后，数据库中的购物车表（cart表）主要存储了三个信息...
微信小程序——自定义底部tabBar
每天都要努力学习哦~~
05-10 1万+
》如果在选择点击切换按钮时，页面没根据tabBar进行切换，问题很可能能在custom-tab-bar目录的index.js 的list数据配置的页面路径，一定要。由于canvas组件是原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。第一步骤中的custom设置为true，小程序就可以自动读取该目录下的index组件，把该组件当做tab渲染出来。这两个组件也是原生组件，但是使用限制与其他原生组件有所不同。此时，通过点击切换页面，就可以实现。
微信小程序wx.setTabBarBadge使用
成长笔记
12-26 7409
官方api wx.setTabBarBadge({ index: 1, text: '2’ }); 微信官方api要求text属性应该为number类型，但是使用过程中发现必须为string类型，并且为数字字符串、字母字符串、和汉字字符串时最多都显示4个字符，多于四个时显示为省略.....，汉字时竖直显示。...
解决wx.setTabBarBadge 只能在tabBar页调用的问题
热门推荐
gzyzwx的博客
11-20 1万+
1、问题描述 wx.setTabBarBadge 这个API在非tabbar页面上调用会失效。 假如我在首页（一堆商品），进入到商品详情页，把商品加入到购物车，这时候，想要购物车（tabBar页显示购物车数量） 注意！！！ 在商品详情页直接调用wx.setTabBarBadge，然后回到tabBar页，会发现没效果 解决方案 1、在商品详情页加入购物车成功时 设置app.globalData.c...
微信小程序动态设置 wx.setTabBarBadge数字显示
Hgiao的博客
11-14 2533
文档一看就会，动手一做就废 微信小程序如何实现如微信中未读信息的数量的功能？ 简单的呀皮，只需要调用wx.setTabBarBadge接口就可以了。 文档代码，直接复制粘贴，贴在哪？ 贴代码里啊 wx.setTabBarBadge({ index: 0, //tab下标 text: '1' //要设置的内容 }) 不过这是死值，怎么动态绑定 wx.setTabBarBadge({ index: 0, //tab下标 text: "'+res.xx.length+'" //要设置的
uniapp开发指南1 -- 微信小程序申请 wx.getLocation、wx.chooseLocation API指南
Mr_LiangDaGe的博客
11-08 5925
微信小程序申请 wx.getLocation、wx.chooseLocation API指南
【微信小程序】wx.login 和 wx.getUserProfile 同时使用问题
Jessieeeeeee的博客
08-14 3659
场景 在使用微信登录时，通常会在调用 wx.login 获取 code 后再通过 wx.getUserProfile 获取 iv 和 encryptedData （加密数据）一起发到后端进行登录验证； 但是，在实际使用中如果在 wx.login 方法调用后再调用 wx.getUserProfile 会报错； 官方解释 也就是说，不能在调用方法的回调中使用 wx.getUserProfule()； 解决方法 使用Promise.all()方法实现平级调用； Promise.all() 方法接收一个 pro
5.6 微信小程序tab-bar badge角标购物车数量角标实现
weixin_45785694的博客
05-06 1033
但是看到官方的自定义tab-bar的实例代码中解决点击两次才能切换tab-bar的方法也是在每个tab-bar页面的onShow上去调用上面的方法来更新自定义tab-bar实例的值，所以也只能接受了，不知道有没有更好的方法。关于上面的点击两次才能正常切换tab-bar(高亮)的解决方法还有一种，通过生命周期来赋值。目前是在每一个tab-bar的页面的onShow的事件中去更新，数量用全局变量保存。缺点：无法控制样式，只能展示4个字符，超出变成...我自己遇到的一个难点是更新的时机。1、原生tab-bar。
记录 uni.setTabBarBadge 不显示
qq_45670750的博客
07-31 487
场景：需要在tabbar消息那一块加一个消息未读数量。原因：res.obj.isNoReadNum是数字。未读数量从后端接口获取,打印控制台，有数据。
微信小程序 MinUI组件库系列之badge徽章组件示例
10-18
主要介绍了微信小程序 MinUI组件库系列之badge徽章组件示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序 MinUI 组件库系列之 badge 徽章组件
weixin_33698823的博客
01-17 542
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库，适用场景广，覆盖小程序原生框架、各种小程序组件主流框架等，并且提供了高效的命令行工具。MinUI 组件库包含了很多基础的组件，其中 badge 徽章组件是一个很常用的基础元件， MinUI 中 badge 组件的效果图如下： 各式各样的类型都有哦，是不是看起来很方便很快捷的样子(^_^)。可以打开微信扫一扫下面的小...
【解决uniapp小程序tabBar不显示或者无效的问题】
最新发布
weixin_52772457的博客
10-07 2783
https://blog.csdn.net/qq_42339350/article/details/116591612?fromshare=blogdetail&sharetype=blogdetail&sharerId=116591612&sharerefer=PC&sharesource=weixin_52772457&sharefrom=from_link
微信小程序weui在线入门教程-基础组件-badge徽章
杭州.黄老师
05-30 5106
效果图 Wxml代码 <view class="page"> <view class="page__hd"> <view class="page__title">Badge</view> <view class="page__desc">徽
wx.setTabBarBadge 动态使用 删除角标 删除tabBar上的文本 取消红框
baidu_39040364的博客
05-24 6007
今天在使用 wx.setTabBarBadge tabBar上的角标时 但是不知道咋把角标删除掉 可能我自己没找到 记录一下 不给值的时候会出现小红框 解决办法 wx.hideTabBarRedDot({ index: 2 }) 就可以了 可能是文档写的不清楚 ...
uni-app 微信小程序tabBar角标或徽标badge不生效 但Android安卓却显示正常
weixin_43743378的博客
03-30 3689
在使用uni-app的方法修改角标时，如果非tabBar页面也会修改影响角标展示的值，那么应该在封装展示角标的混入里，使用onShow生命周期函数去重新调用一次，以避免不同tabBar页面和非tabBar页面切换时角标展示异常的问题。
setTabBarBadge在非tabBar页面设置
somdip的博客
12-15 1835
不支持，需要在tabBar栏操作。 可以换种思路，在本页面遮罩层实现业务逻辑，这样没有离开tabBar页面，就可以操作setTabBarBadge。 wxml <!-- 遮罩层 --> <!-- <view class="shadow" wx:if="{{chooseSize}}" bindtap='hideModal'></view> --> <!-- 上滑高度 --> <view class='choosen' wx:if="{{
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值