小程序自定义tabbar中购物车数量不同步问题

于 2023-01-13 17:51:45 发布
阅读量510 收藏 1
点赞数
文章标签： javascript 微信小程序 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZxcHelloworld/article/details/128677441
版权

在自定义tabbar中加入了公共的购物车数量显示，但是在切换页面时 这个数会来回变。

具体现象是在分类页面中购物车数量显示16，然后切换到购物车页面新加了两个商品变为18 ，这时候切换回分类页面会发现tabbar里面的数字会先变成16在变成18

后来才想到自定义tabbar相对每个页面都是独立的，想要不闪必须得让他们之间互相同步通信才行

解决思路就是利用闭包，在app.js中声明一个绑定回调的变量

每次打开tabbar页面的时候都将syncCartNum这个同步数量的函数加到 refreshCarNumCallBack 变量中

最后每次添加商品数量的时候都需要循环调用一下 refreshCarNumCallBack 中的函数

ZxcHelloworld
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
01-18
首先介绍一下角标的方法： // tabBer角标 index代表的是第几个tabber text表示角标内容 wx.setTabBarBadge({ index: 2, text: '1' }) } { wx.removeTabBarBadge({ //移除指定位置的tabbar右上角的标志 index: 2, }) 接下来介绍怎么实现绑定购物车数量进行实时更新： 这里的话代码在App.js里，这是因为我的tabbar底部的是需要填充数量，所以为了实时监听，我在APP.js里面做了如下操作 //首先定义了
微信小程序底部tabBar显示数量(如购物车)
sslcsq的博客
05-14 3281
首先通过wx.setTabBarBadge进行设置 wx.setTabBarBadge({ //tabBar右上角添加文本 index: 2,//tabBar下标（底部tabBar的位置，从0开始） text: num //显示的内容,必须为字符串可通过JSON.toString()将number转为字符串 }) 如果想要移除的时候，可使用这个wx.removeTabBarBadge来移除 只要看需求了 wx.removeTabBarBadge({ //移除taBar
uni-app实战商城类app和小程序
03-07
适用人群具备Html+Css+Javascript基础知识和Vuejs基础知识。课程概述本季度为uni-app实战项目第2季度，将实战商城类app和小程序，其中会包括发布到安卓端app，iOS端app、微信小程序，另外还会涉及Weex（nvue），Vuex模块化管理，商城支付模块等。课程大纲见以下图！
tabbar添加购物车数字-小程序开发分享（六）
qq_36560875的博客
12-22 871
一个商城类的小程序，做完之后，客户增加需求，在下面的tabbar购物车上添加数字。 我也 是一个入门不起久的新手，刚接手的时候觉得很复杂，应该要舍弃配置的tabbar。自己封装一个。后来在网上查了一下。发现原生是支持设置数字的。 wx.setTabBarBadge({ //购物车不为空 ，给购物车的tabar右上角添加购物车数量标志 index: 2, //标志添加位置 text: "" + res...
小程序中在底部tabbar上显示购物的数量（如：购物车）
dd602350527的博客
06-19 2783
onShow: function() { if (this.data.num == '') { //如果还未添加商品时候，可使用这个wx.removeTabBarBadge来移除 wx.removeTabBarBadge({//移除tabbar右上角的文本 index: 2,//tabbar下标 }) } else { //添加商品后通过wx.setTabBarBadge来进行设置 wx.setTabBarBadge({//tabbar右上角添加
优雅的实现微信小程序动态tabBar及组件中实现动态数据
gamerre的博客
07-19 5573
3、重点是在对应导航的JS文件中找到onShow方法，写上tabService.updateIndex(this,0)，其中tabService就是我们写的全局tab-service.js，引入一下。要实现动态导航首先要考虑的是如何把小程序中的原生导航更改为自定义导航。重点在实现自定义tabbar的时候，会出现点击导航，高亮状态及跳转链接出现混乱的现象，这是因为使用Component组件是不允许设置动态数据的。1、我们先在utils目录中创建tab-service.js文件，写上全局的数据及方法；...
小程序自定义tabbar
最新发布
09-15
小程序自定义tabbar，覆盖默认tabbar，实现中间凸起功能和样式，包括html和js
微信小程序 自定义tabbar (源码)
05-31
微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义...
小程序源码 自定义tabbar (代码+截图)
06-19
小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar ...
uniapp小程序自定义动态tabbar
04-08
uniapp小程序自定义动态tabbar
微信小程序 购物车 飘红点 显示购物数量 实测绝对好用
01-13
微信小程序购物车飘红点显示已经加在购物车内的商品数量，很实用的代码demo，可以用在商城项目中
微信小程序源码（含截图）自定义tabbar
05-19
微信小程序源码（含截图）自定义tabbar微信小程序源码（含截图）自定义tabbar微信小程序源码（含截图）自定义tabbar微信小程序源码（含截图）自定义tabbar微信小程序源码（含截图）自定义tabbar微信小程序源码（含...
11-小程序(购物车页面,深度监听购物车数据变化让本地也跟着变化,数组reduce方法算总价总数量,计算属性弄全选状态,数组方法集合)
Tangoneone的博客
07-10 1772
01.购物车-页面分析 入口: 点击底部tab菜单购物车时显示购物车页面;商详点击购物车跳转购物车页面 主要模块 商品列表 每一个商品包括选中状态，商品图片，商品名称，商品单价，商品数量 全选，总价，总数量 其他说明 收货地址放在支付页面 商品列表每一项目可以调整选中状态及数量 点击结算跳转到支付 02.购物车数据存哪里？（补充 ） 描述：购物车的数据的改变是发请求还是存本地，还是存Vuex?发请求即可 对比以上三个方案 购物车添加商品，刷新页面数据依然在 vuex刷新
tabbar角标 小程序_小程序角标的添加及绑定购物车数量进行实时更新的实现代码...
weixin_35368877的博客
01-30 862
首先介绍一下角标的方法：// tabBer角标 index代表的是第几个tabber text表示角标内容wx.setTabBarBadge({index: 2,text: '1'})}{wx.removeTabBarBadge({ //移除指定位置的tabbar右上角的标志index: 2,})接下来介绍怎么实现绑定购物车数量进行实时更新：这里的话代码在App.js里，这是因为我的tabb...
微信扫码点餐小程序 云开发cms网页管理后台后厨端订单数据库折线趋势图
03-02
技术选型1，前端微信小程序原生框架cssJavaScript2，管理后台云开发Cms内容管理系统web网页3，数据后台小程序云开发云函数云数据库云存储 1，小程序端1-1，首页首页有以下几个功能点点餐菜单浏览排号等位拨打电话顶部轮播图搜索菜品这里点餐分两种1，可以设置直接点餐直接点餐：适合小型饭店，或者奶茶类的快餐店。直接就可以下单，不用识别桌号2，也可设置扫码点餐扫码点餐适合中大型饭店，可以区分桌号，方便管理我后面会教大家如何生成桌号二维码，只需要把对应桌号的二维码贴在餐桌上，用户点击 扫码点餐 识别二维码，即可获取到桌号信息。1-2，菜品浏览页菜品浏览分两种1，不带分类适合菜品少的时候2，带分类菜品多的时候，带分类更方便客户选择不带分类 带分类 1-3，搜索功能我们这里搜索有两个触发方式1，直接点击搜索图标2，点击键盘上的搜索键1-4，搜索结果，支持模糊查询如我这里只搜‘鱼’，那么菜品中所有包含鱼的都可以搜索到 1-5，购物车首先菜品列表页可以直接添加商品到购物车购物车弹起后可以做如下操作1，增删单个菜品2，清空购物车3，删除菜品这些操作都和菜品列表是联动的，也就是菜品列表和购物车里增删个数，都是可以同步的。我会在项目预览章节的视频里做具体演示。1-6，下单页下单页就是确认订单后进行下单支付的。有以下功能1，点餐明细2，价格计算3，桌号地址4，就餐人数5，添加备注6，点击下单1-7，支付页支付页分两种方式1，模拟支付适合前期学习，毕业设计等演示类的场景。2，真实微信支付适合商用，但是使用微信支付必须要有营业执照，所以前期如果只是学习的话，建议使用模拟支付。 1-8，我的订单页我的订单页分以下几个状态1，新下单待上餐2，已上餐待评价3，订单完成4，订单取消1-9，提交评论页我们可以对店家进行评论。 1-10，评价列表页可以查看所有评价和自己的评价 1-11，排号等位可以看出，我们可以选择就餐人数，排大桌或者小桌。我这里已排小桌为例通过上图可以看出1，当前排号情况2，我的排号3，可以重新排号4，到号时会有到号提示后面我会把订阅消息功能加进来，这样到号后会有订阅消息提示。 1-12，个人中心个人中心分登录和未登录两种状态未登录已登录 1-13，微信授权登录小程序 2，后厨端和排号管理端2-1，后厨端主要供后厨的厨师使用1，可以查看当前新下单2，完成后可以操作菜品完成3，可以监听用户新下单4，有新订单时会有语音提示5，厨师登录页语音提示我会在视频课里具体演示厨师登录页 厨师管理页可以查看待制作订单用户新下单后，会有语音提示 2-2，排号管理页同样也有登录页，和上面厨师登录一样，这里重点看下排号管理页管理员可以查看当前排号情况，可以叫号。3，cms管理后台我们这里的可视化网页后台使用的时云开发自带的cms(内容管理)3-1，登录页 3-2，管理后台我们可以在这里 1，添加轮播图，删除轮播图，修改轮播图2，添加菜品，删除菜品，修改菜品，上架下架菜品3，管理订单4，查看评价5，管理后厨和排号管理员6，查看排号数据  比如我查询某个用户的所有订单 查询所有新下单还未上菜的订单 还有更多的功能，我会在视频课里给大家用视频来演示，这样更直观。 4，数据库数据库我们这里用云开发自带的云数据库餐厅管理员查看趋势图
微信小程序自定义组件：带未读数目的tabBar按钮(小红点+带未读数目)
叶落无痕的博客
06-08 5648
http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1046&extra=page%3D1%26filter%3Dtypeid%26typeid%3D6 http://www.xcxwo.com/component/view/6a5b269d88c6cc870e53fe6a81f6d67e 小程序底部tab...
解决wx.setTabBarBadge 只能在tabBar页调用的问题
热门推荐
gzyzwx的博客
11-20 1万+
1、问题描述 wx.setTabBarBadge 这个API在非tabbar页面上调用会失效。 假如我在首页（一堆商品），进入到商品详情页，把商品加入到购物车，这时候，想要购物车（tabBar页显示购物车数量） 注意！！！ 在商品详情页直接调用wx.setTabBarBadge，然后回到tabBar页，会发现没效果 解决方案 1、在商品详情页加入购物车成功时 设置app.globalData.c...
小程序中如何在底部tabbar上显示购物的数量。
W_Zhulin的博客
05-03 604
//如果还未添加商品时候，可使用这个wx.removeTabBarBadge来移除 wx.removeTabBarBadge({//移除tabbar右上角的文本 index: 2,//tabbar下标 }) //添加商品后通过wx.setTabBarBadge来进行设置 wx.setTabBarBadge({//tabbar右上角添加文本 ind...
小程序购物车显示数字实时同步
qq_43027386的博客
12-17 3544
小程序购物车显示数字实时同步 首先，先给购物车定义一个数值，起始值为0，每点击一下商品加入购物车就要给这个数值加1，这是最基础的；然后就是商品加入购物车里后，在购物车里操作商品，例如：增加减少商品数量，或删除此商品，对应的数值也要减少。在这里可以直接在点商品的界面js里的onShow方法里面写定义的数值等于购物车里面存储商品的总数。这样就可以做到点击商品数量增加，点到购物车界面进行增减删操作之后，...
微信小程序自定义tabbar不显示
05-02
如果自定义的tabbar不显示，可能是以下几个原因导致的： 1. 在app.json中的tabBar配置项中设置了custom属性为true，但是在自定义的tabBar组件中没有设置一个名为custom的属性，并将其值设置为true。 2. tabBar组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值