小程序底部tabbar悬浮数字标功能

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

小程序底部tabbar悬浮数字标功能

实现效果如下：

大家都知道小程序的底部，是通过APP,JSON进行配置的，如果想要在下面的tabbar上面做手脚的话，网上搜索是找不到方法的，好多小白见到这种需求都感觉无从下手，如果你也遇到这种问题，那就好好研究一下API吧，话不多说，上代码：

下面来看我的实现逻辑

首先，因为我的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