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

黄粱一梦2024-03-013

问题描述

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

image.png

项目场景

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

起初做法

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

store/shoppingCart/shopping.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

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

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

问题解决:stuck_out_tongue:

分类:前端uniApp

标签:前端vueuniapp小程序

上一篇关于小程序页面栈的问题下一篇微信小程序获取用户地址真机可以 开发者工具报错

版权声明

本文系作者 @黄粱一梦 转载请注明出处,文中若有转载的以及参考文章地址也需注明。\(^o^)/~

Preview