微信小程序实现简单购物车功能


Posted in Javascript onDecember 30, 2020

这个微信小程序的购物车功能,通过参照各大电商平台的功能和界面,然后总结出来的。

效果图

微信小程序实现简单购物车功能

功能描述

1、可单选,全选/取消全选
2、增加、减少、手动编辑商品的数量
3、根据商品的数量统计价格 

代码实现

此处省略一万字,废话不多说,直接上代码吧!

WXML静态布局、绑定“死”数据(主要功能代码)

<view class="list">
 <block wx:for="{{dataArr}}" wx:key="index" wx:for-item="item">
  <view class="li clearfix">
  <!-- 单品选择按钮 -->
  <view class="check" wx:if="{{item.selected}}" bindtap="selectList" data-index="{{index}}"><text class="iconfont icon-dagou"></text></view>
  <view class="check" wx:else bindtap="selectList" data-index="{{index}}"><text class="iconfont icon-choose"></text></view>
 
  <view class="img fl"><image src="{{item.image}}" mode="aspectFill"></image></view>
  <view class="right fr">
   <view class="title ellipsis-2">{{item.title}}</view>
 
   <!-- 增加减少编辑数量 -->
   <view class="num_w clearfix">
   <view class="fl" bindtap="minusCount" data-index="{{index}}">-</view>
   <view class="fl num"><input type="number" value="{{item.num}}" bindinput="inputCount" bindblur="bindblur" data-index="{{index}}" /></view>
   <view class="fl" bindtap="addCount" data-index="{{index}}">+</view>
   </view>
 
   <view class="price">¥{{item.price}}</view>
  </view>
  </view>
 </block>
 </view>
 <view class="bottom clearfix">
 <!-- 全选/取消全选按钮 -->
 <view class="check fl">
  <text class="iconfont icon-dagou" wx:if="{{selectAllStatus}}" bindtap="selectAll"></text>
  <text class="iconfont icon-choose" wx:else bindtap="selectAll"></text>
  <text class="text">全选</text>
 </view>
 
 <view class="button gradientButton fr"><button bindtap="toOrder">去结算</button></view>
 
 <!-- 总价 -->
 <view class="price fr">合计:<text>¥{{totalPrice}}</text></view>
</view>

WXSS:样式有点多,就不放上来啦,需要的可以留下你的邮箱地址哦 

JS:

当页面刚加载进来,当然要先onShow一下,默认全选,统计购物车里所有商品的价格。PS:这里建议用onShow,因为每次进入购物车都需要重新加载数据,而onLoad和onReady只在初始化的时候执行一次。

onShow() {
 this.getTotalPrice();
}

统计总价(该页面还有其它地方需要调用到这个方法)

// 统计总价
getTotalPrice() {
 // 获取购物车列表
 let dataArr = this.data.dataArr;
 let total = 0;
 // 循环列表
 for(let i = 0; i<dataArr.length; i++) {
 // 判断选中才会计算价格
 if(dataArr[i].selected) {
  // 所有价格加起来
  total += dataArr[i].num * dataArr[i].price;
 }
 }
 // 赋值到data中渲染到页面
 this.setData({ 
 dataArr: dataArr,
 totalPrice: total.toFixed(2)
 });
}

选择商品(单选),通过 data-index="{{index}}" 把当前商品在列表数组中的下标传给事件,在更改单个商品的状态时,也要注意全选的状态,还有重新统计总价。

// 选择事件
selectList(e) {
 // 获取data- 传进来的index
 let index = e.currentTarget.dataset.index;
 // 获取购物车列表
 let dataArr = this.data.dataArr;
 // 获取当前商品的选中状态
 let selected = dataArr[index].selected;
 // 改变状态
 dataArr[index].selected = !selected;
 this.setData({
 dataArr: dataArr
 });
 
 // 改变全选状态
 for (var i=0; i<this.data.dataArr.length; i++){
 // 当状态为全选时,每个元素其中有一个为false,则取消全选
 // 当状态为非全选时,每个元素都为true,则全选
 if(this.data.selectAllStatus){
  if(!this.data.dataArr[i].selected){
  this.setData({
   selectAllStatus: false
  });
  break;
  }
 }else {
  if(this.data.dataArr[i].selected){
  this.setData({
   selectAllStatus: true
  });
  }else {
  this.setData({
   selectAllStatus: false
  });
  break;
  }
 }
 }
 
 // 重新统计总价
 this.getTotalPrice();
}

商品全选/取消全选,该状态更改之后也要重新统计总价哦,包括后面的,我就不再提示了

// 全选事件
selectAll(e) {
 // 是否全选状态
 let selectAllStatus = this.data.selectAllStatus;
 selectAllStatus = !selectAllStatus;
 let dataArr = this.data.dataArr;
 for (let i = 0; i < dataArr.length; i++) {
 // 改变所有商品状态
 dataArr[i].selected = selectAllStatus;
 }
 this.setData({
 selectAllStatus: selectAllStatus,
 dataArr: dataArr
 });
 // 重新统计总价
 this.getTotalPrice();
}

另外,还有增加或减少数量的方法。

温馨提示:减少数量时注意不能少于1(参考某宝商城的做法)

// 增加数量
addCount(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = dataArr[index].num;
 num = num + 1;
 dataArr[index].num = num;
 this.setData({
 dataArr: dataArr
 });
 // 重新统计总价
 this.getTotalPrice();
},
 
// 减少数量
minusCount(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = dataArr[index].num;
 if(num <= 1){
 wx.showToast({
  title: '宝贝不能再减少啦',
  icon: 'none'
 })
 return false;
 }
 num = num - 1;
 dataArr[index].num = num;
 this.setData({
 dataArr: dataArr
 });
 // 重新统计总价
 this.getTotalPrice();
}

然后,还有手动输入数量的方法

// 输入数量
inputCount(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = e.detail.value;
 dataArr[index].num = num;
 this.setData({
 dataArr: dataArr
 });
 // 重新统计总价
 this.getTotalPrice();
}

别忘了,手动输入数量也要有不能少于1的判断哦,我这里是在input失去焦点时做的判断,当然也是参考某宝商城的做法

// 失去焦点时判断数量是否小于1
bindblur(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = e.detail.value;
 if(num < 1){
 wx.showToast({
  title: '数量不能小于1',
  icon: 'none'
 })
 num = 1;
 dataArr[index].num = num;
 this.setData({
  dataArr: dataArr
 });
 // 重新统计总价
 this.getTotalPrice();
 }
}

最后,就是去结算了,在处理完一堆噼里啪啦的业务之后,跳转到结算页面

// 去结算
toOrder() {
 // 处理数据
 // *****
 // Author: Moss
 // QQ: 827291427
 // *****
 
 // 跳转结算页面
 wx.navigateTo({
 url: '/pages/shop/order/order'
 })
}

虽然,购物车的功能没有太难,但是涉及到的微信小程序的知识点还是挺多的,可以从中学习并掌握!

希望能帮到浏览这篇文章的你,当然更希望你能在阅读之后自己能写出来,而不是复制粘贴来敷衍任务。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript修改IMG标签的src问题
Mar 28 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
vue3中的组件间通信
Mar 31 Vue.js
js中Map和Set的用法及区别实例详解
Feb 15 Javascript
微信小程序实现购物车小功能
Dec 30 #Javascript
Vue实现简易购物车页面
Dec 30 #Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 #Vue.js
vue+element UI实现树形表格
Dec 29 #Vue.js
vue实现树状表格效果
Dec 29 #Vue.js
vue实现图书管理系统
Dec 29 #Vue.js
微信小程序实现下拉加载更多商品
Dec 29 #Javascript
You might like
用PHP和MySQL保存和输出图片
2006/10/09 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Python制作词云的方法
2018/01/03 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
信号生成及DFT的python实现方式
2020/02/25 Python
Django权限设置及验证方式
2020/05/13 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
2014年招商工作总结
2014/11/22 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
城南旧事观后感
2015/06/11 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL