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


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 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
JS如何生成随机验证码
2020/03/02 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
婚庆司仪主持词
2014/03/15 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
党内外群众意见范文
2015/06/02 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python