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


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 相关文章推荐
jQuery get和post 方法传值注意事项
Nov 03 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
Bootstrap Table从零开始
Jun 30 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 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
基于mysql的论坛(7)
2006/10/09 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
PHP7 新增功能
2021/03/09 PHP
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
Python查询IP地址归属完整代码
2017/06/21 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
python两个list[]相加的实现方法
2020/09/23 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
市优秀教师事迹材料
2014/02/05 职场文书
海飞丝的广告词
2014/03/20 职场文书
我爱我校演讲稿
2014/05/21 职场文书
公司活动总结范文
2014/07/01 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
学前班语言教学计划
2015/01/20 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
业务员年终工作总结2015
2015/05/28 职场文书