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


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 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
WEB 浏览器兼容 推荐收藏
May 14 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 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
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
python中self原理实例分析
2015/04/30 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
python能做什么 python的含义
2019/10/12 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
函授毕业生自我鉴定
2013/11/06 职场文书
经济与贸易专业应届生求职信
2013/11/19 职场文书
表演方阵解说词
2014/02/08 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
师范生求职信
2014/06/14 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
七一建党节慰问信
2015/02/14 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python