需求:需要在购物车的tabbar上面添加一个数字角标 ,需要动态更新数字
问题描述:发现官网上有 uni.setTabBarBadge 这个方法可以设置角标,于是在商品详情页加入购物车之后调用下面这个方法
却发现报错了
根据提示发现,这个方法不能在tabbar以外的页面调用。
解决办法:
1.在tabber页面onShow时候调用,因为有多个页面可以进商品详情,所以在每个最后返回的tabber页面都需要调用下设置角标方法,但是又因为这些东西都是可以复用的。
2.将购物车数量放到仓库中(useCartStore),这里用了pinia 做状态管理
3.定义了一个混入方法
4.具体实现代码
5.在购物车页面如果删除商品时需要调用一下这个方法去更新角标
最后解决了这个问题。