uni-app setTabBarBadge在非tabBar页面设置时无法生效

25 年 01 月 18日星期六 (已编辑)

作者：未知用户

日常生活

这篇文章最后修改于 2025年 01月 18日 19时10分部分内容可能已不适用如有疑问请联系作者.

问题描述

::: danger 问题
uni-app setTabBarBadge在非tabBar页面设置时无法生效
:::

项目场景

商品详情页面加购商品购物车角标应该对应增加

起初做法

刚开始是在vuex里面使用getters获取商品总数在app.vue里面watch当前商品数量然后对应更新页面的角标

store/shoppingCart/shopping.js

js 复制代码

getters:{
		// 商品总量
		goodsCount(state){
			let num = 0
			num = state.shoppingCart.reduce((count,current) => {
				if(current.select && !state.outIdList.find(i => i == current.spuId)) {
					return num += current.quantity
				}else {
					return num
				}
			},num)
			console.log('num',num);
			return num
		}
	}

app.vue

js 复制代码

watch:{
			goodsCount:{
				handler(newGoodCount,oldGoodCount){
					console.log('触发监听',newGoodCount);
					let that = this
					uni.setTabBarBadge({ //显示红点
						index: 2 ,//tabbar下标
						text:newGoodCount+'',
					})
					if(newGoodCount == 0) {
						uni.hideTabBarRedDot({
							index:2
						})
					}
				},
				immediate:true
			}
		},

后来控制台看是可以打印出来最新数据也执行了对应的逻辑但是角标不更新

解决问题

定义updateBadge函数每个页面onShow钩子里面调用该函数

index.vue

js 复制代码

onShow(){
    this.updateBadge()
},
updateBadge(){
				if(this.goodsCount > 0) {
					uni.setTabBarBadge({ //显示红点
						index: 2 ,//tabbar下标
						text:this.goodsCount+'',
					})
				}
				if(this.goodsCount == 0) {
					uni.hideTabBarRedDot({
						index:2
					})
				}
			},

问题解决😛

暂无目录信息

文章标题：uni-app setTabBarBadge在非tabBar页面设置时无法生效

文章作者：未知用户

文章链接：[复制]

最后修改时间：2024年 03月 01日 14时38分

商业转载请联系站长获得授权，非商业转载请注明本文出处及文章链接，您可以自由地在任何媒体以任何形式复制和分发作品，也可以修改和创作，但是分发衍生作品时必须采用相同的许可协议。本文采用CC BY-NC-SA 4.0进行许可。

豫ICP备2022014268号-1

我们历经沧桑，这样错过了一生最好的时光，错过了便是永远