微信小程序之购物车功能 1
前言
以往的购物车,基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能。
完整的小程序商城demo含购物车,请戳:wxapp-mall
需求
先来弄清楚购物车的需求。
- 单选、全选和取消,而且会随着选中的商品计算出总价
- 单个商品购买数量的增加和减少
- 删除商品。当购物车为空时,页面会变为空购物车的布局
根据设计图,我们可以先实现静态页面。接下来,再看看一个购物车需要什么样的数据。
- 首先是一个商品列表(carts),列表里的单品需要:商品图(image),商品名(title),单价(price),数量(num),是否选中(selected),商品id(id)
- 然后左下角的全选,需要一个字段(selectAllStatus)表示是否全选了
- 右下角的总价(totalPrice)
- 最后需要知道购物车是否为空(hasList)
知道了需要这些数据,在页面初始化的时候我们先定义好这些。
代码实现
初始化
Page({data: {carts:[], // 购物车列表hasList:false, // 列表是否有数据totalPrice:0, // 总价,初始为0selectAllStatus:true // 全选状态,默认全选},onShow() {this.setData({hasList: true, // 既然有数据了,那设为true吧carts:[{id:1,title:'新鲜芹菜 半斤',image:'/image/s5.png',num:4,price:0.01,selected:true},{id:2,title:'素米 500g',image:'/image/s6.png',num:1,price:0.03,selected:true}]});},
})
购物车列表数据我们一般是通过请求服务器拿到的数据,所以我们放在生命周期函数里给 carts 赋值。想到每次进到购物车都要获取购物车的最新状态,而onLoad和onReady只在初始化的时候执行一次,所以我需要把请求放在 onShow 函数里。(这里先拿点假数据冒充一下吧)
布局 wxml
修好之前写好的静态页面,绑定数据。
<view class="cart-box"><!-- wx:for 渲染购物车列表 --><view wx:for="{{carts}}"><!-- wx:if 是否选择显示不同图标 --><icon wx:if="{{item.selected}}" type="success" color="red" bindtap="selectList" data-index="{{index}}" /><icon wx:else type="circle" bindtap="selectList" data-index="{{index}}"/><!-- 点击商品图片可跳转到商品详情 --><navigator url="../details/details?id={{item.id}}"><image class="cart-thumb" src="{{item.image}}"></image></navigator><text>{{item.title}}</text><text>¥{{item.price}}</text><!-- 增加减少数量按钮 --><view><text bindtap="minusCount" data-index="{{index}}">-</text><text>{{item.num}}</text><text bindtap="addCount" data-index="{{index}}">+</text></view><!-- 删除按钮 --><text bindtap="deleteList" data-index="{{index}}"> × </text></view>
</view><!-- 底部操作栏 -->
<view><!-- wx:if 是否全选显示不同图标 --><icon wx:if="{{selectAllStatus}}" type="success_circle" color="#fff" bindtap="selectAll"/><icon wx:else type="circle" color="#fff" bindtap="selectAll"/><text>全选</text><!-- 总价 --><text>¥{{totalPrice}}</text>
</view>
计算总价
总价 = 选中的商品1的 价格 * 数量 + 选中的商品2的 价格 * 数量 + …
根据公式,可以得到
getTotalPrice() {let carts = this.data.carts; // 获取购物车列表let total = 0;for(let i = 0; i<carts.length; i++) { // 循环列表得到每个数据if(carts[i].selected) { // 判断选中才会计算价格total += carts[i].num * carts[i].price; // 所有价格加起来}}this.setData({ // 最后赋值到data中渲染到页面carts: carts,totalPrice: total.toFixed(2)});
}
页面中的其他操作会导致总价格变化的都需要调用该方法。
选择事件
点击时选中,再点击又变成没选中状态,其实就是改变 selected 字段。通过 data-index=”{{index}}” 把当前商品在列表数组中的下标传给事件。
selectList(e) {const index = e.currentTarget.dataset.index; // 获取data- 传进来的indexlet carts = this.data.carts; // 获取购物车列表const selected = carts[index].selected; // 获取当前商品的选中状态carts[index].selected = !selected; // 改变状态this.setData({carts: carts});this.getTotalPrice(); // 重新获取总价
}
全选事件
全选就是根据全选状态 selectAllStatus 去改变每个商品的 selected
selectAll(e) {let selectAllStatus = this.data.selectAllStatus; // 是否全选状态selectAllStatus = !selectAllStatus;let carts = this.data.carts;for (let i = 0; i < carts.length; i++) {carts[i].selected = selectAllStatus; // 改变所有商品状态}this.setData({selectAllStatus: selectAllStatus,carts: carts});this.getTotalPrice(); // 重新获取总价
}
增减数量
点击+号,num加1,点击-号,如果num > 1,则减1
// 增加数量
addCount(e) {const index = e.currentTarget.dataset.index;let carts = this.data.carts;let num = carts[index].num;num = num + 1;carts[index].num = num;this.setData({carts: carts});this.getTotalPrice();
},
// 减少数量
minusCount(e) {const index = e.currentTarget.dataset.index;let carts = this.data.carts;let num = carts[index].num;if(num <= 1){return false;}num = num - 1;carts[index].num = num;this.setData({carts: carts});this.getTotalPrice();
}
删除商品
点击删除按钮则从购物车列表中删除当前元素,删除之后如果购物车为空,改变购物车为空标识hasList为false
deleteList(e) {const index = e.currentTarget.dataset.index;let carts = this.data.carts;carts.splice(index,1); // 删除购物车列表里这个商品this.setData({carts: carts});if(!carts.length){ // 如果购物车为空this.setData({hasList: false // 修改标识为false,显示购物车为空页面});}else{ // 如果不为空this.getTotalPrice(); // 重新计算总价格}
}
总结
虽然一个购物车功能比较简单,但是里面涉及到微信小程序的知识点还是比较多的,适合新手练习掌握。
更多文章:lin-xin/blog
微信赞赏
微信小程序之购物车功能 1相关推荐
- 微信小程序实战 购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com ...
- 微信小程序实现购物车功能,包含完整小程序代码和运行效果截图
微信小程序实现购物车功能,在商场比较常见,今天刚刚做好,效果不错. 下面从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 ...
- 微信小程序商城开发功能构架介绍
微信小程序商城开发,微信小程序商城开发功能,微信小程序商城开发介绍.截止到2021年末初手机微信小程序总数就早就超过400万,而且网络购物小程序愈来愈占有蛮大的占有率,而这类的小程序大家一般称作商城小 ...
- 黯然微信小程序杂记(三):微信小程序实现倒计时功能 附讲解教学 附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能 附超详细注释 附源码 一.功能描述 二.界面展示 三.test.wxml代码 四.test.js代码(注释很详细 很易懂) CSDN私信我,有关微信 ...
- 微信小程序(购物车)--在wxml中设置保留小数位数
微信小程序(购物车)–在wxml中设置保留小数位数 一.在该页面文件夹下新建一个wxs后缀的文件 var filters = {toFix: function (value) {return valu ...
- 微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能 使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
最新文章
- 什么样的数据适合缓存?
- BZOJ2631: tree
- shell脚本执行返回的状态码
- [转] 关于ASP.NET中由于无法创建应用程序域,因此未能执行请求解决方案
- SAP Spartacus 数据类型定义汇总
- 软件工程 之 画扇面
- python能做什么项目-用python真的可以做很多有趣的事!我自己做了些小项目!大家看看...
- 实验:DHCP中继代理
- GB/T2659-2000,ISO 3166-1:1997,ISO 3166-1:2006国家和地区代码列表(已整理)
- java string占用内存_Java中String到底占用多大的内存空间?
- Java入门 技术总结
- 【经验帖】深度学习如何训练出好的模型
- 什么是松弛变量_什么是松弛,它是如何工作的?
- win7系统没有诊断策略服务器,Win7提示诊断策略服务未运行无法诊断检查网络解决方法...
- 苹果终于要认真发力智能家居了!挖来前微软副总裁掌舵其人工智能部门!
- 关于onMeasure
- Zigbee W-Z-09 模块规格书
- Maya---基础知识(2)
- 用U盘做启动盘安装ubuntu系统
- cad视口缩放区域怎么使用_CAD布局怎么用?简单讲解CAD布局用法和基本操作