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


Posted in Javascript onNovember 18, 2020

本文实例为大家分享了微信小程序实现购物车功能的具体代码,供大家参考,具体内容如下

1、购物车界面功能实现

先来弄清楚购物车的需求。

  • 单选、全选和取消,而且会随着选中的商品计算出总价
  • 单个商品购买数量的增加和减少
  • 删除商品。当购物车为空时,页面会变为空购物车的布局

根据设计图,我们可以先实现静态页面。接下来,再看看一个购物车需要什么样的数据。

首先是一个商品列表(carts),列表里的单品需要:商品图(image),商品名(title),单价(price),数量(num),是否选中(selected),商品id(id)
然后左下角的全选,需要一个字段(selectAllStatus)表示是否全选了右下角的总价(totalPrice)最后需要知道购物车是否为空(hasList)
知道了需要这些数据,在页面初始化的时候我们先定义好这些。

2、下面是代码

<view class="main">
 <view wx:if="{{hasList}}">
  <view class="cart-box">
   <view class="cart-list" wx:for="{{carts}}" wx:key="{{index}}">
    <icon wx:if="{{item.selected}}" type="success" color="red" data-index="{{index}}" class="cart-pro-select" bindtap="selectList"/>
    <icon wx:else type="circle" class="cart-pro-select" data-index="{{index}}" bindtap="selectList"/>
    <navigator url="../details/details?id={{item.id}}"><image class="cart-thumb" src="{{item.image}}"/></navigator>
    <text class="cart-pro-name">{{item.title}}</text>
    <text class="cart-pro-price">¥{{item.price}}</text>
    <view class="cart-count-box">
     <text class="cart-count-down" bindtap="minusCount" data-obj="{{obj}}" data-index="{{index}}">-</text>
     <text class="cart-count-num">{{item.num}}</text>
     <text class="cart-count-add" bindtap="addCount" data-index="{{index}}">+</text>
    </view>
     <text class="cart-del" bindtap="deleteList" data-index="{{index}}">x</text>
   </view>
  </view>
   
   <view class="cart-footer">
    <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#fff" class="total-select" bindtap="selectAll"/>
    <icon wx:else type="circle" color="#fff" class="total-select" bindtap="selectAll"></icon>
    <view class="order-icon">
     <navigator url="../orders/orders"><image src="/image/icon3.png" /></navigator>
    </view>
    <text>全选</text>
    <text class="cart-total-price">¥{{totalPrice}}</text>
   </view> 
 </view>
 <view wx:else>
  <view class="cart-no-data">购物车是空的哦</view>
 </view> 
</view>

js:

// page/component/cart/cart.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
  carts: [], //购物车列表
  hasList: false, //列表是否有数据
  totalPrice: 0, // 总价 初始为0 
  selectAllStatus: true, // 全选状态 默认全选
  obj: {
  name: "hello"
  }
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {

 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {
  this.setData({
   hasList: true, // 含有数据 设为true 
   carts: [
   {id: 1, title: '新鲜芹菜 半斤', image:'/image/s5.png',num:4,price: 0.01,seclected:true},
   {id: 2, title: '素米 500g', image: '/image/s6.png', num: 1, price: 0.03, seclected:true}
   ]
  });
  this.getTotalPrice();
 },
 // 当前商品选中事件
 selectList(e) {
 const index = e.currentTarget.dataset.index; //获取 data 传进来的index
 let carts = this.data.carts;   // 获取购物车列表
 const seclected = carts[index].seclected; //获取当前商品的选中状态
 carts[index].seclected = !seclected; // 改变状态
 this.setData({
  carts: carts
 });
 this.getTotalPrice();      //重新获取总价
 },

 // 删除购物车当前商品
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();    // 重新计算总价格
 }
},

// 购物车全选事件

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();  //重新获取总价
},

// 绑定加数量事件
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;
 const obj = e.currentTarget.dataset.obj;
 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();
},

// 计算总价
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)
  });
},

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {

 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {

 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {

 }
})

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

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
js arguments.callee的应用代码
May 07 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
vue实现移动端拖动排序
Aug 21 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 #Vue.js
微信小程序实现日历小功能
Nov 18 #Javascript
微信小程序实现底部弹出模态框
Nov 18 #Javascript
微信小程序实现左滑删除效果
Nov 18 #Javascript
详解vue实现坐标拾取器功能示例
Nov 18 #Vue.js
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 #jQuery
Vue如何循环提取对象数组中的值
Nov 18 #Vue.js
You might like
PHP连接Access数据库的方法小结
2013/06/20 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
JavaScript类库D
2010/10/24 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
Django发送html邮件的方法
2015/05/26 Python
python中__call__内置函数用法实例
2015/06/04 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
租房协议书
2014/04/10 职场文书
移风易俗倡议书
2014/04/15 职场文书
英语系毕业生求职信
2014/07/13 职场文书
社区敬老月活动总结
2015/05/07 职场文书
入党转正申请书范文
2019/05/20 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers