小程序角标的添加及绑定购物车数量进行实时更新的实现代码


Posted in Javascript onDecember 07, 2020

首先介绍一下角标的方法:

// tabBer角标  index代表的是第几个tabber  text表示角标内容
    wx.setTabBarBadge({ 
      index: 2,						
      text: '1'			
    })
   }
   {
    wx.removeTabBarBadge({  //移除指定位置的tabbar右上角的标志
      index: 2,
    })

接下来介绍怎么实现绑定购物车数量进行实时更新:
这里的话代码在App.js里,这是因为我的tabbar底部的是需要填充数量,所以为了实时监听,我在APP.js里面做了如下操作

//首先定义了一个方法
 timer: false,
 scanCart: function () {
 //我把购物车里面的数据都塞到了缓存里,取名cart,任何一项修改购物车的行为,都会先取购物车的缓存,在重新更新缓存里的购物车参数
 //购物车
   var cart = wx.getStorageSync("cart");
   //统计购物车商品的总数量(我们需要的是总数量而不是具体的,如果要具体的话需要for循环:
			  for (var index in cart) {
			  //注意:这里的num是后端返回的数据里的值,各不相同,这里我用num展示
     cartnumber += cart[index].num
   }

)
   var cartnumber = cart.length; //购物车里的数量
   
  
   
   if (cart.length) {  //判断购物车的数量个数,购物车如果为空就走else
  // tabber角标  index代表的是第几个tabber  text表示角标内容

    wx.setTabBarBadge({ //购物车不为空 ,给购物车的tabar右上角添加购物车数量标志
      index: 2,						//标志添加位置
      text: ""+cartnumber + ""				//通过编译,将购物车总数量放到这里
    })
   } else {//购物车为空
    wx.removeTabBarBadge({  //移除指定位置的tabbar右上角的标志
      index: 2,
    })
   }
 },

然后在App.js里的onLaunch写入:

var that = this;
  //初始化购物车
  that.timer = setInterval(function () {
    that.scanCart(that)
  }, 100);
  that.scanCart(that);

到此这篇关于小程序角标的添加及绑定购物车数量进行实时更新的实现代码的文章就介绍到这了,更多相关小程序角标的添加内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 Javascript
Vue $attrs & inheritAttr实现button禁用效果案例
Dec 07 #Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 #Vue.js
JS操作JSON常用方法(10w阅读)
Dec 06 #Javascript
10分钟学会js处理json的常用方法
Dec 06 #Javascript
JavaScript中的几种继承方法示例
Dec 06 #Javascript
js调用网络摄像头的方法
Dec 05 #Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 #Vue.js
You might like
PHP HTML代码串 截取实现代码
2009/06/29 PHP
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
微信支付开发告警通知实例
2016/07/12 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
Python中functools模块的常用函数解析
2016/06/30 Python
使用Python对MySQL数据操作
2017/04/06 Python
关于python的list相关知识(推荐)
2017/08/30 Python
python清理子进程机制剖析
2017/11/23 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
提升python处理速度原理及方法实例
2019/12/25 Python
Python批量启动多线程代码实例
2020/02/18 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
Django models文件模型变更错误解决
2020/05/11 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
两只小狮子教学反思
2014/02/05 职场文书
交通事故协议书范文
2014/04/16 职场文书
大学迎新生标语
2014/10/06 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
迎新生欢迎词
2015/01/23 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
Python中的变量与常量
2021/11/11 Python
详解Vue的列表渲染
2021/11/20 Vue.js
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers