小程序底部tabbar加数字标
目录
小程序底部tabbar加数字标
小程序底部tabbar悬浮数字标功能
实现效果如下：
大家都知道小程序的底部，是通过APP,JSON进行配置的，如果想要在下面的tabbar上面做手脚的话，网上搜索是找不到方法的，好多小白见到这种需求都感觉无从下手，如果你也遇到这种问题，那就好好研究一下API吧，话不多说，上代码：
//这里我们只介绍我们用到的方法
wx.setTabBarBadge({//这个方法的意思是，为小程序某一项的tabbar右上角添加文本
index: 0, //代表哪个tabbar（从0开始）
text: '1' //显示的内容
})
wx.removeTabBarBadge({//这个方法为移除当前tabbar右上角的文本
index: 2, //代表哪个tabbar（从0开始）
})下面来看我的实现逻辑
首先，因为我的tabbar底部的是需要填充数量，然而添加购物车的按钮很多，所以为了时时监听，我在APP.js里面做了如下操作：
//首先定义了一个方法
timer: false,
scanCart: function (that) {
//我把购物车里面的数据都塞到了缓存里，取名cart,任何一项修改购物车的行为，都会先取购物车的缓存，在重新更新缓存里的购物车参数
//购物车
var cart = wx.getStorageSync("cart");
//统计购物车商品的总数量
var cartnumber = 0; //购物车菜品的一共的数量
for (var index in cart) {
cartnumber += cart[index].num
}
if (cart.length) { //判断购物车的数量个数，购物车如果为空就走else
wx.setTabBarBadge({ //购物车不为空 ，给购物车的tabar右上角添加购物车数量标志
index: 2, //标志添加位置
text: "" + cartnumber + "" //通过编译，将购物车总数量放到这里
})
} else {//购物车为空
wx.removeTabBarBadge({ //移除指定位置的tabbar右上角的标志
index: 2,
})
}
},你以为这么就完了？这只能做基础的更改，因为每次加入购物车，数据都要刷新，但是，页面不刷新我们该怎么做，逻辑如下，
在APP.JS的生命周期函数onLaunch里面，写一个计时器，每过（100毫秒）就重新取购物车的缓存，计算数量重新塞到tabbar的标志里，这个方法每过100毫秒执行一次，所以购物车的缓存只要在任何地方做了更改，下面的标志就会紧跟着随着改变。
代码如下：
onLaunch: function (options) {
var that = this;
//初始化购物车
that.timer = setInterval(function () {
that.scanCart(that)
}, 100);
that.scanCart(that);
},小结：这里面一定要注意，其他任何地方对购物车做了修改，一定要同时更改一下购物车的缓存数据，防止数据乱掉。有任何问题欢迎一起学习研究，微信：w827306356