微信小程序购物车案例

最近呢，我看到有人在问微信小程序的购物车怎么写，我呢就在这里写一写；

购物车主要的就是全选的判断、勾选单个物品判断是否全选、计算总价
效果Gif图：

直接简单粗暴的上代码；

wxml代码：

   
      
      
     全选    
      
  {{adminShow?'取消管理':'管理'}}

  
        
  
      
         
     
 
     
  
     {{item.name}} 
     {{item.types}} 
          
  ￥{{item.price}}     
    
      
      
      
  
      {{item.num}}  
      
           
   
         
    
 

    
       
       
       
   

接下来是wxss:

page{  
    background: #f3f7f7;  
    height: 100%;  
    width: 100%;  
    display: flex;  
    flex-direction: column;
}
.header{  
    padding: 0 20rpx;  
    background: #fff;  
    height: 90rpx;  
    display: flex;  
    border-bottom: 1px solid #efefef;
}
.check_box{  
    flex: 1;  
    display: flex;  
    line-height: 90rpx;  
    font-size: 30rpx;
}
.check_img{  
    width: 38rpx;  
    height: 38rpx;  
    margin-top:26rpx;
}
.check_text{  
    margin-left: 15rpx;  
    line-height: 90rpx;
}
.header_text{
  font-size: 30rpx;  
  line-height: 90rpx;  
  padding:0 6rpx;  
  color: #ff9600;
}
.main{
  flex: 1;  
  overflow:auto;  
  -webkit-overflow-scrolling: touch; 
}
.shop{
  background: #fff;  
  display: flex;  
  padding:20rpx;  
  border-bottom: 1px solid #efefef;
}
.shop_check_box{
  margin-top: 45rpx;
}
.shop_img{
  width: 180rpx;  
  height: 180rpx;  
  margin:0 20rpx;
}
.shop_detail{
  flex: 1;
}
.shop_name{
  font-size: 30rpx;  
  line-height: 40rpx;  
  display: block;  
  max-height: 80rpx;  
  word-break:break-all;  
  display:-webkit-box;  
  -webkit-line-clamp:2;  
  -webkit-box-orient:vertical;  
  overflow:hidden;
}.shop_type{
  display: block;  
  font-size: 26rpx;  
  color: #ccc;  
  line-height: 50rpx;
}
.shop_detail_bottom{
  display: flex;
}
.shop_price{
  line-height: 50rpx;  
  flex: 1;  
}
.num_change{
  display: flex;  
  padding-top: 11rpx;
}
.shop_num{
  line-height: 38rpx;  
  height: 38rpx;  
  width: 60rpx;  
  text-align: center;  
  font-size: 30rpx;
}
.add_icon,.minus_icon{
  width: 38rpx;  
  height: 38rpx;
}

好了，接下来是js代码：

var app=getApp();
Page({  
    data: {
   adminShow:false,//管理      
   shopcardata:[],//购物车数据      
   total:0,//总金额      
   allsel:false,//全选      
   selarr:[],//选择的货物      
   hintText:'',//提示的内容      
   hintShow:false//是否显示提示  
},  

//点击全选  
allcheckTap:function(){
    let shopcar=this.data.shopcarData, 
  allsel = !this.data.allsel,//点击全选后allsel变化
  total=0;    
    for(let i=0,len=shopcar.length;i=0;j--){
  console.log(shopcar[j].id);   
  if(selarr[i].id==shopcar[j].id){
     shopcar.splice(j, 1);   
  } 
      }      
   }  
     }    
     this.setData({      
  shopcardata:shopcar,      
  total:0    
     });  
},  
//点击加入收藏夹，这里按自己需求写吧  
addcollectTap:function(){ 

},  
//点击管理按钮，是否显示管理的选项  
adminTap:function(){
    this.setData({
      adminShow: !this.data.adminShow    
    });  
},  
//点击单个选择按钮  
checkTap:function(e){
    let Index=e.currentTarget.dataset.index, 
  shopcar=this.data.shopcarData, 
  total=this.data.total, 
  selarr=this.data.selarr;    
    shopcar[Index].check = !shopcar[Index].check||false;    
    if(shopcar[Index].check){  
      total += shopcar[Index].num * shopcar[Index].price;      
      selarr.push(shopcar[Index]);    
    }else{ 
      total -= shopcar[Index].num * shopcar[Index].price;      
      for(let i=0,len=selarr.length;i
最后是app.js里的购物车里的数据
App({
    globaldata:{
 shopcardata: [{//购物车   
    id: '1',     
    name: '折后i啊手动阀就是点击发送的金佛啊是是假的佛山折后i啊手动阀就是点击发送的金佛啊是是假的佛山',      
    price: '230',      
    num: 1,      
    types: '白色/39码',      
    check:true    
  }, {    
    id: '2',      
    name: '啊哈额和福特好热惊讶所以就如同撒打发士大夫',      
    price: '332',      
    num: 1,      
    types: '粉色/38码'    
  }, {   
    id: '3',      
    name: '啊如何呀还是大范围推广哇额饿啊日hers的说法的事发生的',      
    price: '120',      
    num: 1,     
    types: '白色/41码',      
    check: true    
  }, {      
    id: '4',      
    name: '阿桑的歌也会更好的反对犯得上的事发生的',      
    price: '320',      
    num: 1,      
    types: '黑色/37码',      
    check: true    
  }, {     
    id: '5',      
    name: '阿桑的歌微软噶士大夫啊士大夫但是飞洒地方士大夫撒',      
    price: '630',      
    num: 1,      
    types: '白色/39码',      
    check: true    
  }]
     }

})
好了上面就是关于微信小程序购物车的例子，
如果有哪里有问题，或者你有什么好的建议或者意见请留言，谢谢