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


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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
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 debug 安装技巧
2011/04/30 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
vue中轮训器的使用
2019/01/27 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
python游戏开发的五个案例分享
2020/03/09 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
《美丽的彩虹》教学反思
2014/02/25 职场文书
锦旗标语大全
2014/06/23 职场文书
2014年教师节活动总结
2014/08/29 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
贷款工资证明范本
2015/06/12 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
2016特色励志班级口号
2015/12/24 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
Hive常用日期格式转换语法
2022/06/25 数据库