效果图
首先我们要拆分一下购物车的功能点
1.商品选中功能，包括单选、全选
2.商品数量加减功能
3.商品的总数量计算
4.商品的总价钱计算
大致分为以上四点了，现在我们来一个个实现
首先呢，我们现在js的data里放入一些数据
//code表示编号,name商品名称,url图片地址,style类型说明，price价格，select是否选中,num购买数量
list:[{
code:"0001",
name:"无人机",
url:"http://i1.mifile.cn/a1/pms_1487824962.01314237!220x220.jpg",
style:"低配版",
price:"4999",
select:"circle",
num:"1"
},
{
code: "0002",
name: "智能手环",
url: "http://i1.mifile.cn/a1/pms_1467962689.97551741!220x220.jpg",
style: "2代",
price: "149",
select: "circle",
num: "1"
},{
code: "0003",
name: "指环支架",
url: "http://i2.mifile.cn/a1/pms_1482221011.26064844.jpg",
style: "金色",
price: "19",
select: "circle",
num: "1"
}]
然后呢，我们wxml文件中的选中框这么写
<icon type="{{item.select}}" size="26" data-index="{{index}}" data-select="{{item.select}}" bindtap="change"/>
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代码
<view class="num-box">
<view class="btn-groups">
<button class="goods-btn btn-minus" data-index="{{index}}" data-num="{{item.num}}" bindtap="subtraction">—</button>
<view class="num">{{item.num}}</view>
<button class="goods-btn btn-add" data-index="{{index}}" data-num="{{item.num}}" bindtap="addtion">+</button>
</view>
</view>
点击时还是带两个信息，一个是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<newList.length;i++){
if(newList[i].select == "success"){
newCount += newList[i].num * newList[i].price
}
}
that.setData({
count:newCount
})
}
最后呢，我们在点击加减或者是选中的操作方法的结尾，调用上面的两个计算方法就行了
代码在下方，如果觉得有用，欢迎打赏。。。
链接：http://pan.baidu.com/s/1pLv2USj 密码：4bri
网友评论