小程序底部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) {   //判断购物车的数量个数，购物车如果为空就走elsewx.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

小程序底部tabbar加数字标相关推荐

用mpx框架自定义小程序底部tabbar
小程序[mpx] 用mpx框架自定义小程序底部tabbar 参考小程序官方文档:自定义 tabBar. 1.项目根目录下app.mpx** 1).添加"custom":" ...
小程序底部tabBar购物车右上角增加数字
小程序底部tabBar购物车右上角增加数字 data: {num:'1'},onShow:function(){var num=1;if(num==''){wx.removeTabBarBadge({ ...
uniapp小程序底部tabbar图标大小设置
小程序底部tabbar图标大小设置在uniapp中小程序的tabbar没有设置图标大小的属性,导致小程序在不同平台打开时图标大小显示的不一样,特别是在电脑微信打开小程序时,底部的图标就会特别大,使得 ...
微信小程序底部tabBar配置
文章目录什么是tabBar tabBar节点的配置项配置tabBar选项的步骤 1. 新增tabBar节点 2. 新增list数组 3. 更改tabBar上文字被选中时的颜色什么是tabBar ...
微信小程序底部tabBar购物车右上角增加数字
// pages/cart/cart.js; onShow: function () {var num = 1; //购物车商品数量if (num == '') {wx.removeTabBarBad ...
小程序底部tabbar设置扫一扫功能
效果图及需要的页面: custom-tab-bar/index.js Component({data: {selected: 0,"color": "#bfb ...
aos动画库反向播放，pdf复制出现乱码，微信小程序底部栏联系客服
少小多才学,平生志气高.别人怀宝剑,我有笔如刀. 记录一些遇到的问题- 本文大概3000字,阅读大概需要9分钟 ** 本文目录一.pdf复制出现乱码问号问题二.aos动画库反向播放问题三.微信 ...
微信小程序底部实现自定义动态Tabbar
多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...
小程序底部导航栏(tabBar)图标的正确做法
许多人都认为小程序系统的底部导航栏特别不好看,为了美观而选择自定义,从此身陷漩涡无法自拔.其实真正的原因是图标的图片处理不当(说白了就是前端和设计太菜了),导致会有线条变粗,间距不当的视觉感受. 除小 ...

小程序底部tabbar加数字标

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

下面来看我的实现逻辑

小程序底部tabbar加数字标相关推荐

最新文章

热门文章