小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020-12-09 04:07
1461 查看
首先介绍一下角标的方法:
// 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);
到此这篇关于小程序角标的添加及绑定购物车数量进行实时更新的实现代码的文章就介绍到这了,更多相关小程序角标的添加内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:相关文章推荐
- jquery来实现的添加商品和减少商品数量,用于购物车等实时改变价格
- magento购物车添加减少数量 实时更新购物车
- magento 产品详细页面添加购物车数量实时更新总价格
- iOS实现自定义购物车角标显示购物数量(添加商品时角标抖动 Vie)
- JQuery Clone 添加多行数据,并更新到数据库的实现代码
- C# 程序中如何向(DEV)ComboBoxEdit控件中添加下拉列表的值不使用数据绑定,就是使用代码添加
- 利用PHP安装windows自动运行的服务,PHP程序可以实现长时间、自动运行、定时更新功能,直接可以用在项目中的类源代码
- 小程序购物车[实现加减计算金额以及数量]
- 章鱼哥—VB.NET 如何实现代码自动生成控件 添加绑定事件
- 模仿购物车实现ListView中商品数量的添加以及总价的调整
- javascript对talbe进行动态添加、删除、验证实现代码
- 简单实现stm32f103芯片usb模拟U盘进行IAP更新用户程序
- ajax 实现订单商品数量的增减及订单的删除进行异步更新界面
- ajax 实现订单商品数量的增减及订单的删除进行异步更新界面
- vue实现添加购物车 如果存在则实行数量加加 否则新添加到列表
- 微信小程序批量监听输入框对按钮样式进行控制的实现代码
- VUE 实现购物车或者消息中心未读消息数量的实时监听
- 本文给出了一种方便实用的解决大文件的读取、存储等处理的方法,并结合相关程序代码对具体的实现过程进行了介绍
- asp.net(c#)程序版本升级更新的实现代码
- javascript对talbe进行动态添加、删除、验证实现代码