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


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 相关文章推荐
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
jQuery ajax应用总结
Jun 02 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 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
关于js和php对url编码的处理方法
2014/03/04 PHP
php简单的上传类分享
2016/05/15 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
让元素在网页中可拖动示例代码
2013/08/13 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
javascript判断office版本示例
2014/04/11 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
python处理csv中的空值方法
2018/06/22 Python
Python地图绘制实操详解
2019/03/04 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
技术总监的工作职责
2013/11/13 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
投标承诺函范文
2015/01/21 职场文书
委托书英文
2015/01/28 职场文书
遗失说明具结保证书
2015/02/26 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
如何撰写创业策划书
2019/06/27 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL