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


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的一些注意
Dec 06 Javascript
百度留言本js 大家可以参考下
Oct 13 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
js回调函数仿360开机
Dec 26 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
JS简单表单验证功能完整示例
Jan 26 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全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
Python字符编码判断方法分析
2016/07/01 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
关于Django外键赋值问题详解
2017/08/13 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
opencv实现图像几何变换
2021/03/24 Python
工商行政管理专业求职书
2014/05/23 职场文书
食品安全宣传标语
2014/06/07 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python