啦啦啦，我又来了，下面写一个关于小程序购物车的案例，页面如下图：
image
- 当上面全部打钩时，下面全选显示选取状态
- 当下面显示全选状态时，上面全部打钩，当下面显示未选状态时，上面全部未选中
- 当右边点击-时，数量-1，当右边点击+时，数量+1，数量设置最多能加到10，最小为0
以下是我的思路：
- data中设置list数组，数组里面存对象，通过list数组循环创建view，通过data-id来确定改变哪个元素
- 单个点击打钩，因为对象的拷贝是拷贝的地址，所以找出数组中当前点击的对象，赋值给goods，将goods中的isChoose取反，此时goods指向的对象同时改变，通过this.setData方法更新data中的数据
- 当每个小项都打钩时，用数组的every返回是否每个isChoose都是true，将返回的结果true/false赋值给isSelectAll，通过this.setData方法更新data中的数据
- 当点击全选按钮时，通过forEach方法将对象中的所有isChoose等于！isSelectAll，做出全选按钮控制上面小项打钩的效果
- 写一个关于总价的函数sum()，在其他时间发生时，总价也在变化，可以在其他函数中调用此函数sum()
- sum()函数用forEach方法将选中的商品中的单价和数量相乘累加得到
- 因为总价在页面加载的时候就会开始，所以在onload状态也要调用
<!--pages/car/car.wxml-->
<!-- 根据data里面的list数组循环创建view -->
<view class="productList" wx:for='{{list}}' wx:key='id'>
<!-- 下面的class样式来源于iconfonts网站 -->
<view bindtap="choose" class="check iconfont {{item.isChoose?'icon-Checklabel':'icon-Checklabelinterface'}}" data-id="{{item.id}}">
</view>
<view class="main">
<view> {{item.name}} </view>
<view class="desc">{{item.guige}}</view>
</view>
<view>
{{item.price}}
</view>
<view class="jisuan">
<view bindtap="minus" class="tab jian" data-id="{{item.id}}">-</view>
<view>{{item.count}}</view>
<view bindtap="add" class="tab jia" data-id="{{item.id}}">+</view>
</view>
</view>
<view class="bottom">
<view bindtap="checkAll" class="all check iconfont {{isSelectAll?'icon-Checklabel':'icon-Checklabelinterface'}}">
</view>
<view>{{total}}</view>
<view class="btn">结算</view>
</view>
/* pages/car/car.wxss */
/* 引入iconfont图标 */
@import "../../icon/font/iconfont.wxss";
.productList{
padding:20rpx;
display: flex;
border-bottom: 4rpx dashed #eee;
}
.main{
margin: 0 30rpx;
width:40vw;
}
.main .desc{
font-size: 26rpx;
color: #ccc;
}
.check{
color: skyblue;
font-size: 52rpx;
}
.bottom{
height: 100rpx;
background: #eee;
position: fixed;
width: 100vw;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.bottom .btn{
background: skyblue;
height: 100%;
color: #fff;
padding: 0 100rpx;
line-height: 100rpx;
}
.all{
padding:0 10rpx;
}
.jisuan{
width: 150rpx;
height: 50rpx;
display: flex;
justify-content: space-between;
position: absolute;
right: 20rpx;
}
.jisuan view:nth-child(2){
flex: 1;
text-align: center;
}
.jisuan .tab.jia{
text-align: center;
width: 50rpx;
background: skyblue;
border-radius: 50%;
color: #fff;
}
.jisuan .tab.jian{
text-align: center;
width: 50rpx;
border: 2rpx solid skyblue;
border-radius: 50%;
color: skyblue;
}
// pages/car/car.js
Page({
sum() {
let total = 0
this.data.list.forEach((item) => {
if (item.isChoose) {
total +=item.price * item.count
}
})
this.setData({
total
})
},
choose(e) {
let id = e.currentTarget.dataset.id
let goods = this.data.list.find((r) => r.id === id)
goods.isChoose = !goods.isChoose
this.data.isSelectAll = this.data.list.every((item) => item.isChoose)
this.sum()
this.setData({
list: this.data.list,
isSelectAll: this.data.isSelectAll,
})
},
checkAll() {
this.data.list.forEach((item) => item.isChoose = !this.data.isSelectAll)
this.sum()
this.setData({
isSelectAll: !this.data.isSelectAll,
list: this.data.list,
})
},
minus(e) {
let id = e.currentTarget.dataset.id
let goods = this.data.list.find((r) => r.id === id)
if (--goods.count < 0) goods.count = 0
this.sum()
this.setData({
list: this.data.list,
})
},
add(e) {
let id = e.currentTarget.dataset.id
let goods = this.data.list.find((r) => r.id === id)
if (++goods.count > 10) goods.count = 10
this.sum()
this.setData({
list: this.data.list,
})
},
/**
* 页面的初始数据
*/
data: {
total: 0,
isSelectAll: false,
list: [{
id: 1,
isChoose: false,
name: 'LV1',
guige: '国产',
price: 80,
count: 0
}, {
id: 2,
isChoose: false,
name: 'LV1',
guige: '国产',
price: 60,
count: 10
}, {
id: 3,
isChoose: false,
name: 'LV2',
guige: '国产',
price: 110,
count: 2
}, {
id: 4,
isChoose: false,
name: 'LV3',
guige: '进口',
price: 80,
count: 6
}, {
id: 5,
isChoose: false,
name: 'LV1',
guige: '进口',
price: 220,
count: 3
}]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.sum()
}
})
