小程序实现购物车全选反选+数量加减效果---引入iconfont图标

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

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状态也要调用

  
  
  
     {{item.name}} 
    {{item.guige}}
  
  
    {{item.price}}
  
  
    -
    {{item.count}}
    +
  



  
{{total}}
结算

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

  
})