购物车案例小总结

对于项目中的购物车,以及微信小程序购物车逻辑的总结

1.uni中使用的uview组件

单选框需要使用来包裹住单个的

<--单个-->

    
	

<--全部-->

		
		全选

数据变量

data(){
    return{
        isallcheck:false,  //全选的按钮
        checkboxList: [{
					name: '苹果',
					disabled: false,
					ischeck:true
			        },
					{
					name: '66',
					disabled: false,
					ischeck:false
					}],
           }
    }

代码实现

methods: {
        // 单独
		geischeck(item){
			console.log(item);
			item.ischeck = !item.ischeck;
			let che= this.checkboxList.every(el=>el.ischeck === true);
			if(che){
				this.isallcheck = true//都有 全选 
			}else{
				this.isallcheck = false// 反选
			} 	
		},
        // 全部
		checkboxChange() {
			this.isallcheck = !this.isallcheck;
			this.checkboxList.forEach(el=>{
				el.ischeck = this.isallcheck;
			})
		},
     }

2.微信小程序原生(没有双向绑定)

使用的checkbox表单组件

<--单选-->

    

<--全选-->
 

实现方法

data: {
    isallcheck:false, //全选
    itemss: [
      {value: '苹果', name: '苹果6', },
      {value: '香蕉', name: '香蕉6' ,checked: 'true',},
      {value: '菠萝', name: '菠萝6' ,checked: 'true',},
    ]
  },
// 单个的数组
  checkboxChange(e){
    var val = e.detail.value;
    this.data.itemss.forEach(ele=>{
      // 判断ele的值,查看数组中内容
      var bol = val.includes(ele.value);
      if(bol){
        ele.checked = true
      }else{
        ele.checked = false
      }
    })
    this.setData({
      itemss:this.data.itemss
    });
    if(val.length == this.data.itemss.length){
      this.setData({
        isallcheck:true
      })
    }else{
      this.setData({
        isallcheck:false
      })
    }
  },
  // 全部
  isallchecked(){
    // 控制全部数据列表
    var bol = this.data.itemss.every(el=>el.checked);
    if(bol){
     this.data.itemss.forEach(ele=>{
       ele.checked = false
     })
    }else{
      this.data.itemss.forEach(ele=>{
        ele.checked = true
      })
    }
    this.setData({
      itemss: this.data.itemss
    })
  },