项目场景:

在这里插入图片描述

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);
					}
				});
			} else {
				uni.hideTabBarRedDot({
					index: 2
				});
			}

问题描述:

底部导航购物车需要有数量TabBarBadge
setTabBarBadge在非tabBar页面设置时无法生效
即商品详情页中,点击加入购物车

this.setUserInfo({
	cartGoodsNum: parseInt(this.userInfo.cartGoodsNum) + this.goodsNum
		});

返回页面时tabBar上的数量标识没有进行实时更改
提示错误信息{errMsg: "setTabBarBadge:fail not TabBar page"}


解决方案:

在每一个tabBar页面中的onShow()中都加上购物车数量判断

//页面显示
	onShow() {
		this.judgeLogin(() => {
			this.pageData();
			if (Number(this.userInfo.cartGoodsNum) > 0) {
				uni.setTabBarBadge({
					index: 2,
					text: String(this.userInfo.cartGoodsNum),
					complete(e) {
						console.log(e);
					}
				});
			} else {
				uni.hideTabBarRedDot({
					index: 2
				});
			}
		});
	},

就可以在页面返回的时候,重新进行判断,实时更新数量

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐