Day16--加入购物车-动态设置tabBar的数组徽标

问题1：

①：刚开始

②：点击购物车的图标后，跳转到cart页面发现，并没有徽标在tabbar上：

 

提纲挈领：

我的操作：

1》把 Store 中的 total 映射到 cart.vue 中使用：

 

2》在页面刚显示出来的时候，立即调用 setBadge 方法，为 tabBar 设置数字徽标：

 3》在 methods 节点中，声明 setBadge 方法如下，通过 uni.setTabBarBadge() 为 tabBar 设置数字徽标：

解决问题1：

 

************************************************************************************************************** 

问题2：

 

提纲挈领：

 

 我的操作：

所以我们需要为四个tarBar都设置徽标才可以避免这个问题的出现，之前的哪些代码不仅仅在购物车里面需要写，在首页，分类，我的里面也需要编写才行。

1》在项目根目录中新建 mixins 文件夹，并在 mixins 文件夹之下新建 tabbar-badge.js 文件，用来把设置 tabBar 徽标的代码封装为一个 mixin 文件：

2》修改 home.vue，cate.vue，cart.vue，my.vue 这 4 个 tabBar 页面的源代码，分别导入 @/mixins/tabbar-badge.js 模块并进行使用： 

1>在cart购物车页面中：

2>在home首页中：

 

3>在cate分类中：

 

4>在my我的页面中：

 

 

最终效果图：