专栏首页算法与编程之美微信小程序|购物车

微信小程序|购物车

购物车

在各种购物平台,购物车都是十分常见的,比如淘宝,美团等等各种应用软件。一般的软件购物车都包含商品图片,名称,价格。购物车其实就是一个物品或商品的简介,直观的反映了商品的特性,提醒了用户在购物车内的是一个什么样的商品,一定程度上避免了二次及多次浏览。此外,购物车最重要的功能就是方便用户购买商品,上述特性也都是为了突出这一功能。那么今天我们就来单纯的实现一下购物车功能。这里我们需要使用到上次介绍的多选框。如下图,就是我们今天要介绍的购物车功能。

图1.1 效果图

购物车的实现

首先需要了解购物车实现的功能需求。那么我们就来依次介绍着三种功能并介绍一下实现办法。

大概功能如下:

(1)单个商品购买数量的增加和减少。

(2)删除商品。当购物车为空时,页面会变为空购物车的布局。

(3)单选、全选和取消,而且会随着选中的商品计算出总价。

下面我们就重点介绍几个简单的功能。在index.js文件里,我们采用遍历的方式对玩偶的图片,名称等进行显示。

data: [ { name: "玩偶公仔", index: 0, state: 0, checkeedAll: false, data: [ { url: "../../images/1.jpg", classtitle: "小羊", index: 0, state: 0, checked: false, price: 9.9 }, { url: "../../images/2.jpg", classtitle: "吉他1", index: 1, state: 0, checked: false, price: 9.9 }, { url: "../../images/3.jpg", classtitle: "吉他1", index: 2, state: 0, checked: false, price: 4.9 } ] }, ], checkedAll: false, count: 0, priceAll: 0.0 },

只有所有单选的单选都选中了,当前单选的这块的的父级就会全部选中 ,将选中的父级添加在一个数组当中。如果它本身的数据的length=它被选中的length,就会让三级的全选选中。

var data = this.data.data; var datarr = []; for (var a = 0; a < data.length; a++) { if (data[a].checkeedAll == true) { datarr.push(data[a]); } } if (data.length === datarr.length) { this.setData({ checkedAll: true }); } else { this.setData({ checkedAll: false }); }

//点击全选 AllTap: function (e) { var checkedAll = this.data.checkedAll; var list1 = this.data.data; for (var i = 0; i < list1.length; i++) { list1[i].checkeedAll = !checkedAll; var list2 = this.data.data[i].data; for (var a = 0; a < list2.length; a++) { list2[a].checked = !checkedAll; } }

点击删除按钮则从购物车列表中删除当前元素,删除之后如果购物车为空,改变购物车为空标识。

//点击 单个删除 课程 shanchuTap: function (e) { var that = this; var groupIndex = e.target.dataset.groupindex; //点击 单个删除玩偶 shanchuTap: function (e) { var that = this; var groupIndex = e.target.dataset.groupindex; //获取当前index var index = e.target.dataset.index; //获取玩偶当前index wx.showModal({ title: '', content: '确定要删除吗?', cancelColor: "#ababab", confirmColor: "#027ee7", success(res) { if (res.confirm) { var list2 = that.data.data[groupIndex].data; list2.splice(index, 1); var dataStatus = 'data[' + groupIndex + '].data'; that.setData({ [dataStatus]: list2 }); wx.showToast({ title: '删除成功', icon: "none", }) } else if (res.cancel) { console.log('用户点击取消') } } }); }, var index = e.target.dataset.index; // 拿到当前玩偶 的index wx.showModal({ title: '', content: '确定要删除吗?', cancelColor: "#ababab", confirmColor: "#027ee7", success(res) { if (res.confirm) { var list2 = that.data.data[groupIndex].data; list2.splice(index, 1); var dataStatus = 'data[' + groupIndex + '].data'; that.setData({ [dataStatus]: list2 }); wx.showToast({ title: '删除成功', icon: "none", }) } else if (res.cancel) { console.log('用户点击取消') } } }); },

这里其实对于购物车功能实现的并不完全。但是index.js的代码有点过多,就不再这里展示了。如果有感兴趣的同学,可以去百度网盘提取,尝试一下。网址如下https://pan.baidu.com/s/1SxGulv1D5hY-sgme7oU-eg。提取码:1tim。

END

主 编 | 王楠岚

责 编 | 刘 连

能力越强,责任越大。实事求是,严谨细致。

——where2go 团队

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:刘连

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python|输出指定字符串

    输入一串字符,由字母、数字和空格组成,长度< 1000,判断其中是否存在日期格式的数据。日期格式的数据具有如下的特征,连续包含年份和月份信息。年份信息是指连续的...

    算法与编程之美
  • 前端|AJAX入门

    AJAX 全称为 Asynchronous JavaScript And XML,是一种从网页访问 Web 服务器的技术AJAX 的作用有从 web 服务器请求...

    算法与编程之美
  • 微信小程序|实现界面滑动切换

    在许多用户体验效果较好的微信小程序中,用户通过左右滑动界面也能实现页面的切换,方便了用户使用,那它们是如何实现的呢?

    算法与编程之美
  • 用Python验证指数基金定投策略

    运行代码之后返回到Jupyter Notebook的主页,就能看到保存的000300.csv文件,可以下载到本地进行操作,也可以直接在聚宽的研究环境中进行操作。...

    数据医生
  • flex+php截图Demo

    一、直接将byteArray转为bitmap通过loader(flash.display.Loader)显示在舞台上;

    meteoric
  • [小程序]微信小程序获取input并发送网络请求

    1. 获取输入框数据 wxml中的input上增加bindinput属性,和方法值 在js部分定义与之对应的方法,只要在输入的时候,数据就会绑定调用到该方法,存...

    陶士涵
  • Leetcode 42题 接雨水(Trapping Rain Water)

    https://leetcode-cn.com/problems/trapping-rain-water/

    code随笔
  • [Keras实用技巧]·错误Sequential has no attribution “validation_data”解决

    错误描述:Sequential has no attribution “validation_data”

    小宋是呢
  • 数据的标准化与中心化以及R语言中的scale详解

    1.数据的中心化 所谓数据的中心化是指数据集中的各项数据减去数据集的均值。 例如有数据集1, 2, 3, 6, 3,其均值为3,那么中心化之后的数据集为1-3,...

    学到老
  • 数据的标准化与中心化以及R语言中的scale详解

    所谓数据的中心化是指数据集中的各项数据减去数据集的均值。 例如有数据集1, 2, 3, 6, 3,其均值为3,那么中心化之后的数据集为1-3,2-3,3-3,6...

    学到老

扫码关注云+社区

领取腾讯云代金券