小程序如何实现购物车功能？

　　小程序如何实现购物车功能?随着微信的逐渐发展，微信小程序被推出，最近很多微信用户问我小程序如何实现购物车功能?下面小编就带你了解一下小程序如何实现购物车功能?

　　首先我们要拆分一下购物车的功能点

　　1.商品选中功能，包括单选、全选

　　2.商品数量加减功能

　　3.商品的总数量计算

　　4.商品的总价钱计算

　　大致分为以上四点了，现在我们来一个个实现

　　首先呢，我们现在js的data里放入一些数据

　　//code表示编号,name商品名称,url图片地址,style类型说明，price价格，select是否选中,num购买数量

　　list:[{

　　code:"0001",

　　name:"无人机",

　　url:"i1.mifile/a1/pms_1487824962.01314237!220x220.jpg

　　",

　　style:"低配版",

　　price:"4999",

　　select:"circle",

　　num:"1"

　　},

　　{

　　code: "0002",

　　name: "智能手环",

　　url: "i1.mifile/a1/pms_1467962689.97551741!220x220.jpg

　　",

　　style: "2代",

　　price: "149",

　　select: "circle",

　　num: "1"

　　},{

　　code: "0003",

　　name: "指环支架",

　　url: "i2.mifile/a1/pms_1482221011.26064844.jpg

　　",

　　style: "金色",

　　price: "19",

　　select: "circle",

　　num: "1"

　　}]

　　然后呢，我们wxml文件中的选中框这么写

　　type为success时是选中状态，circle为未选中

　　当用户点击时通过change方法传入data-index和data-select

　　为了确定被点击的商品和该商品是否选中

　　然后change方法

　　//改变选框状态

　　change:function(e){

　　var that=this

　　//得到下标

　　var index = e.currentTarget.dataset.index

　　//得到选中状态

　　var select = e.currentTarget.dataset.select

　　if(select == "circle"){

　　var stype="success"

　　}else{

　　var stype="circle"

　　}

　　//把新的值给新的数组

　　var newList= that.data.list

　　newList[index].select=stype

　　//把新的数组传给前台

　　that.setData({

　　list:newList

　　})

　　其实就是每次点击就更改我们的商品数组里面的信息

　　全选功能也就简单了

　　点击的时候遍历数组嘛，把select属*都变成success就行了

　　//全选

　　allSelect:function(e){

　　var that=this

　　//先判断现在选中没

　　var allSelect = e.currentTarget.dataset.select

　　var newList = that.data.list

　　if(allSelect == "circle"){

　　//先把数组遍历一遍，然后改掉select值

　　for (var i = 0; i < newList.length; i++) {

　　newList[i].select = "success"

　　}

　　var select="success"

　　}else{

　　//取消全选

　　for (var i = 0; i < newList.length; i++) {

　　newList[i].select = "circle"

　　}

　　var select = "circle"

　　}

　　that.setData({

　　list:newList,

　　allSelect:select

　　})

　　}

　　好，现在接着下面一个功能，商品加减

　　现在后面做法基本都一样

　　点击加减，改变list里面的num就行了

　　我这里默认商品最大数量为99件，当为0的时候就移除该商品

　　wxml代码

　　—

　　{{item.num}}

　　+

　　点击时还是带两个信息，一个是data-index确定是那个商品被点击，data-num确定当前的数量

　　//加法

　　addtion:function(e){

　　var that=this

　　//得到下标

　　var index = e.currentTarget.dataset.index

　　//得到点击的值

　　var num = e.currentTarget.dataset.num

　　//默认99件最多

　　if(num<100){

　　num++

　　}

　　//把新的值给新的数组

　　var newList = that.data.list

　　newList[index].num =num

　　//把新的数组传给前台

　　that.setData({

　　list: newList

　　})

　　},

　　//减法

　　subtraction:function(e){

　　var that = this

　　//得到下标

　　var index = e.currentTarget.dataset.index

　　//得到点击的值

　　var num = e.currentTarget.dataset.num

　　//把新的值给新的数组

　　var newList = that.data.list

　　//当1件时，点击移除

　　if (num == 1) {

　　newList.splice(index,1)

　　}else{

　　num--

　　newList[index].num = num

　　}

　　//把新的数组传给前台

　　that.setData({

　　list: newList

　　})

　　}

　　计算总数量这个不要太简单

　　遍历list，把每个item的num属*加起来就OK了

　　//计算数量

　　countNum:function(){

　　var that=this

　　//遍历数组，把既选中的num加起来

　　var newList = that.data.list

　　var allNum=0

　　for (var i = 0; i < newList.length; i++) {

　　if(newList[i].select=="success"){

　　allNum += parseInt(newList[i].num)

　　}

　　}

　　parseInt

　　console.log(allNum)

　　that.setData({

　　num:allNum

　　})

　　}

　　最后一个也简单，遍历数组把每个item的num*price加起来就OK了

　　//计算金额方法

　　count:function(){

　　var that=this

　　//思路和上面一致

　　//选中的订单，数量*价格加起来

　　var newList = that.data.list

　　var newCount=0

　　for(var i=0;i

　　if(newList[i].select == "success"){

　　newCount += newList[i].num * newList[i].price

　　}

　　}

　　that.setData({

　　count:newCount

　　})

　　}

　　最后呢，我们在点击加减或者是选中的操作方法的结尾，调用上面的两个计算方法就行了

　　小程序如何实现购物车功能?通过小编以上的内容，你知道小程序如何实现购物车功能了吗?希望小编的内容对你有所帮助，如果需要了解更多信息，请关注微微风。

　　推荐阅读：

　　微信小程序可以直接扫码进去嘛?

　　微信小程序怎样分享?转发功能如何设置?

　　微信小程序地图定位功能如何制作?