微信小程序实战 购物车功能
代码地址如下:
http://www.demodashi.com/demo/12400.html
一、准备工作
软件环境:微信开发者工具
官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
基本需求
- 显示图书基本信息:名称、作者、描述、价格、数量。
- 点击复选框进行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})},
三、运行效果
微信小程序实战 购物车功能
代码地址如下:
http://www.demodashi.com/demo/12400.html注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权
微信小程序实战 购物车功能相关推荐
- 微信小程序实现购物车功能,包含完整小程序代码和运行效果截图
微信小程序实现购物车功能,在商场比较常见,今天刚刚做好,效果不错. 下面从js文件,json文件,wxml文件和wxss文件,分享给大家. 直接上代码: 目录 1.index.js文件内容 2.ind ...
- 微信小程序之购物车功能
前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求 先来弄清楚购物车的需求. 单选.全选和取消, ...
- 小程序判断数组的index是否为空_微信小程序之购物车功能(仅学习)
购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求 先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选 ...
- 微信小程序实现购物车功能
在我的GitHub上有校园二手交易微信小程序的源码,这里面包含了购物车的功能,GitHub地址:https://github.com/zhuyuzhu/Secondhand-goods-on-camp ...
- 微信小程序之购物车功能 1
前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 完整的小程序商城demo含购物车,请戳:wxapp ...
- [转]微信小程序之购物车 —— 微信小程序实战商城系列(5)
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城 ...
- 微信小程序之购物车 —— 微信小程序实战商城系列(5)
续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城系列(4) 自从认识某人后,我收获了两个成功.登录成功.付款成功,而且还拥有了自己的一辆车: 购物车 也发现了自己的不足之处: 余额不 ...
- 微信小程序实战篇-购物车
哈喽,大家好,快半个月没写了,现在提笔都有点生硬了,一直没更新的原因,一个是代码君也要上班,加上最近工作比较忙,还有就是写文章一直未被认可,所以没什么动力再创作了,那时真的坚持不下去,打算放弃了,感谢 ...
- 小程序swiper怎么让内容撑开高度_[视频]微信小程序实战优购商城,涵盖你所学的技能点...
很多友友都在找视频教程学习,IT技术教程分享网[http://www.mano100.cn]已经为你收集了各种各样的视频教程,不用再到处找视频教程学习了.无论是免费的,还是收费的,都在这里了.只要你注 ...
最新文章
- TemplateBuilder
- DARPA发布战略框架文件旨在 为美国国家安全创建突破性新技术能力
- wordcloud安装失败原因和解决方法
- mybatis实现动态sql语句
- Web前端开发笔记——第四章 JavaScript程序设计 第二节 变量
- 内存、数据结构之栈和堆的区别?
- R语言之离群点检验(part2)--局部离群点因子LOF检验
- Avalonia跨平台入门第二十一篇之玩耍CEF
- HEVC/H265 HM10.0 分析(三)TAppDecTop.cpp
- redis概念、做什么及其应用场景
- eigrp hello报文格式
- 第五和第六单元练习题
- 专升本english
- 鸿蒙10 5G手机,国内首款5G手机!中兴天机Axon 10 Pro 5G版体验点名单一览
- 推荐几款免费的MacOS/MacBook pro/MacBook air读取NTFS格式磁盘软件(完全免费)
- 计算机辅助教学应用于哪些方面,计算机辅助教学在英语教学中的运用
- 文本溢出隐藏显示...和英文换行
- 如何进行 360 评估
- fixture 'xxx' not found
- 学习中如何建立自己的资源库?