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


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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
管理心得体会
2013/12/28 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
给学校的建议书400字
2015/09/14 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
导游词之天津盘山
2019/11/01 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
Windows server 2012搭建FTP服务器
2022/04/29 Servers
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL