最近呢，我看到有人在問微信小程式的購物車怎麼寫，我呢就在這裡寫一寫；
購物車主要的就是全選的判斷、勾選單個物品判斷是否全選、計算總價
效果Gif圖：
直接簡單粗暴的上代碼；
wxml代碼：
全選
{{adminShow?'取消管理':'管理'}}
class='shop_img'
src='http://wxxapp.duapp.com/img/banner1.png'
mode='aspectFill'
catchtap='navshopdetailTap'>
{{item.name}}
{{item.types}}
￥{{item.price}}
class='minus_icon'
hidden='{{item.num<2}}'
src='../../img/minus_icon.png'
data-index='{{index}}'
data-types='minus'
catchtap='numchangeTap'>
class='minus_icon'
hidden='{{item.num>=2}}'
src='../../img/minus_icon_false.png'>
{{item.num}}
class='add_icon'
data-index='{{index}}'
data-types='add'
catchtap='numchangeTap'
src='../../img/add_icon.png'>
合計：￥{{total}}
結算
移除商品
加入收藏夾
接下來是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
shopcar[i].check=allsel;//所有商品的選中狀态和allsel值一樣
if(allsel){//如果為選中狀态則計算商品的價格
total += shopcar[i].price * shopcar[i].num;
}
}
this.data.selarr=allsel?shopcar:[];//如果選中狀态為true那麼所有商品為選中狀态，将物品加入選中變量，否則為空
this.setData({
allsel:allsel,
shopcarData: shopcar,
total:total,
selarr: this.data.selarr
});
},
//點選移除商品
deleteshopTap:function(){
var allsel = this.data.allsel,
shopcar=this.data.shopcarData,
selarr=this.data.selarr;
if(allsel){
shopcar=[];
this.setData({
allsel: false
});
}else{
console.log(selarr);
for(var i = 0, len = selarr.length;i
console.log(selarr[i].id);
for(var lens=shopcar.length-1,j=lens;j>=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
if(shopcar[Index].id==selarr[i].id){
selarr.splice(i,1);
break;
}
}
}
this.setData({
shopcarData:shopcar,
total: total,
selarr: selarr
});
this.judgmentAll();//每次按鈕點選後都判斷是否滿足全選的條件
},
//點選加減按鈕
numchangeTap:function(e){
let Index=e.currentTarget.dataset.index,//點選的商品下标值
shopcar=this.data.shopcarData,
types=e.currentTarget.dataset.types,//是加号還是減号
total=this.data.total;//總計
switch(types){
case 'add':
shopcar[Index].num++;//對應商品的數量+1
shopcar[Index].check && (total +=parseInt(shopcar[Index].price));//如果商品為選中的，則合計價格+商品單價
break;
case 'minus':
shopcar[Index].num--;//對應商品的數量-1
shopcar[Index].check && (total -= parseInt(shopcar[Index].price));//如果商品為選中的，則合計價格-商品單價
break;
}
this.setData({
shopcarData:shopcar,
total: total
});
},
//判斷是否為全選
judgmentAll:function(){
let shopcar=this.data.shopcarData,
shoplen=shopcar.length,
lenIndex=0;//選中的物品的個數
for(let i=0;i
shopcar[i].check && lenIndex++;
}
this.setData({
allsel: lenIndex == shoplen//如果購物車選中的個數和購物車裡貨物的總數相同，則為全選，反之為未全選
});
},
onLoad: function (options) {
},
onReady: function () {
},
onShow: function () {
var shopcarData = app.globalData.shopcarData,//這裡我是把購物車的資料放到app.js裡的，這裡取出來，開發的時候視情況加載自己的資料
total=0,
selarr=this.data.selarr;
for(let i=0,len=shopcarData.length;i
if(shopcarData[i].check){
total+= shopcarData[i].num * shopcarData[i].price;
selarr.push(shopcarData[i]);
}
}
this.setData({
shopcarData: shopcarData,
total: total,
selarr: selarr
});
this.judgmentAll();//判斷是否全選
}
最後是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
}]
}
})
好了上面就是關于微信小程式購物車的例子，
如果有哪裡有問題，或者你有什麼好的建議或者意見請留言，謝謝