啦啦啦，我又来了，下面写一个关于小程序购物车的案例，页面如下图：

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()
  }

  
})