0
uni-app setTabBarBadge在非tabBar页面设置时无法生效
黄粱一梦2024-03-013
问题描述
::: danger 问题
uni-app setTabBarBadge在非tabBar页面设置时无法生效
:::
项目场景
- 商品详情页面加购商品购物车角标应该对应增加
起初做法
刚开始是在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:
版权声明
本文系作者 @黄粱一梦 转载请注明出处,文中若有转载的以及参考文章地址也需注明。\(^o^)/~
Preview