咫尺资讯站一一为您提供时下热门前沿动态

查看更多
首页> 微信小程序资讯> 微信小程序购物车功能模板开发

微信小程序购物车功能模板开发

阅读:89微信小程序

微信小程序购物车功能模板开发的运行效果

一、微信小程序购物车功能模板开发的准备工作

小程序购物车-基本需求

显示图书基本信息:名称、作者、描述、价格、数量。
点击复选框进行toggle操作。当前选中,则变成未选中;当前未选中,则变成选中。
图书数量的加减操作。
根据选中商品进行价格汇总。
全选/全不选。

小程序购物车-目录结构

二、购物车的小程序实现步骤

复选框进行toggle操作。当前选中,则变成未选择;当前未选中,则变成选中。购物车商品全部选中,全选按钮为选中状态。购物车商品全部未选中,全选按钮为未选中状态。

/**   * 用户选择购物车商品   */ checkboxChange: function (e) { console.log('checkbox发生change事件,携带value值为:', e.detail.value); var checkboxItems = this.data.goodList; var values = e.detail.value; for (var i = 0; i < checkboxItems.length; ++i) { checkboxItems[i].checked = false; for (var j = 0; j < values.length; ++j) { if (checkboxItems[i].isbn == values[j]) { checkboxItems[i].checked = true; break; } } } var checkAll = false; if (checkboxItems.length == values.length) { checkAll = true; } this.setData({ 'goodList': checkboxItems, 'checkAll': checkAll }); this.calculateTotal(); }, 
商品的加减操作。当前数量大于1,可以进行加减操作;当前数量为1时,只能进行加操作。
/**   * 用户点击商品减1   */ subtracttap: function (e) { var index = e.target.dataset.index; var goodList = this.data.goodList; var count = goodList[index].count; if (count <= 1) { return; } else { goodList[index].count--; this.setData({ 'goodList': goodList }); this.calculateTotal(); } }, /**   * 用户点击商品加1   */ addtap: function (e) { var index = e.target.dataset.index; var goodList = this.data.goodList; var count = goodList[index].count; goodList[index].count++; this.setData({ 'goodList': goodList }); this.calculateTotal(); }, 
用户点击全选/全不选,遍历购物车所有商品设置当前选中状态。
/**   * 用户点击全选   */ selectalltap: function (e) { console.log('用户点击全选,携带value值为:', e.detail.value); var value = e.detail.value; var checkAll = false; if (value && value[0]) { checkAll = true; } var goodList = this.data.goodList; for (var i = 0; i < goodList.length; i++) { var good = goodList[i]; good['checked'] = checkAll; } this.setData({ 'checkAll': checkAll, 'goodList': goodList }); this.calculateTotal(); } 
选中商品数量发生改变时,进行商品总数量和总价格的计算。
/**   * 计算商品总数   */ calculateTotal: function () { var goodList = this.data.goodList; var totalCount = 0; var totalPrice = 0; for (var i = 0; i < goodList.length; i++) { var good = goodList[i]; if (good.checked) { totalCount += good.count; totalPrice += good.count * good.price; } } totalPrice = totalPrice.toFixed(2); this.setData({ 'totalCount': totalCount, 'totalPrice': totalPrice }) },


【温馨提示】即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至1223636800@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎