最近由于项目开发需要用到多选、单选、多个数量加减控制，就利用小程序做了个购物车demo，仅供参考。
要点：
加减商品数量(可自定义商品数量)、汇总价格、全选与全不选、删除商品弹窗提示
思路：
一、本地模拟Json数据格式的数组（1.购物车商品id：cid 2.标题title 3.图片地址 4.数量num 5.价格price 6.小计 7.是否选中selected）
二、点击复选框操作 如已经选中的，经点击变成未选中，反之而反之 点击依据index作为标识，而不用cid，方便遍历
三、全选操作 首次点击即为全部选中，再次点击为全不选。
四、bindCartNum加减运算函数，加减运算都使用这一个函数控制，同样依据index作为标识，点完写回num值。
五、删除购物车商品：carts.splice(index, 1); 同样依据index作为标识
wxml布局页面结构：
<!--pages/shopCart/shopCart.wxml-->
<!-- 小程序购物车demo -->
<view class="body">
<!-- <>购物车列表 -->
<view class="carts-list">
<view wx:for="{{carts}}" class="carts-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
<!-- //复选框 -->
<view class="carts-radio">
<icon wx:if="{{item.selected}}" type="success_circle" size="20" bindtap="bindCheckbox" data-index="{{index}}" />
<icon wx:else type="circle" size="20" bindtap="bindCheckbox" data-index="{{index}}" />
</view>
<!-- //商品信息 -->
<view class="carts-cnt">
<image class="carts-image" src="{{item.image}}" mode="aspectFill" />
<view class="carts-info">
<view class="carts-title clamp2">{{item.title}}</view>
<view class="carts-subtitle">
<text class="carts-price c--f60">￥{{item.price}}</text>
</view>
</view>
</view>
<!-- //数量加减 -->
<view class="carts-num">
<text class="minus {{minusStatuses[index]}}" data-index="{{index}}" data-type="-" bindtap="bindCartNum">-</text>
<input type="number" data-index="{{index}}" bindinput="bindIptCartNum" value="{{item.num}}" />
<text class="plus normal" data-index="{{index}}" data-type="+" bindtap="bindCartNum">+</text>
</view>
<!-- //删除 -->
<icon class="carts-del" type="clear" size="16" color="#ccc" data-index="{{index}}" bindtap="bindCartsDel" />
</view>
</view>
<!-- //加载提示 -->
<block wx:if="{{showLoading}}">
<view class="page-loading">
<text class="weui-loading" />
<text class="loading-text">加载中</text>
</view>
</block>
<view class="carts-footer">
<view class="bottomfixed">
<view class="inner">
<view class="chkAll" bindtap="bindSelectAll">
<icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20" />
<icon wx:else type="circle" size="20" />
<text>全选</text>
</view>
<view class="total">合计：￥{{totalPrice}}</view>
<view wx:if="{{selectedNum != 0}}" class="btn-pay">去结算({{selectedNum}})</view>
<view wx:else class="btn-pay disabled">去结算({{selectedNum}})</view>
</view>
</view>
</view>
</view>
wxss样式：
/* …… 小程序购物车 {{{ …… */
.c--f60{color: #f60;}
.clamp1, .clamp2, .clamp3{display: -webkit-box!important; overflow: hidden; -webkit-box-orient: vertical;}
.clamp1{-webkit-line-clamp:1;}
.clamp2{-webkit-line-clamp:2;}
.clamp3{-webkit-line-clamp:3;}
.carts-list{padding: 0 20rpx;}
.carts-list .carts-item{border-top: 1rpx solid #e3e3e3; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 20rpx 10rpx; width: 100%; position: relative;}
.carts-list .carts-item:nth-child(1){border-top: 0;}
.carts-item .carts-cnt{flex: 1; padding: 0 20rpx;}
.carts-cnt .carts-image{float:left; margin-right: 20rpx; height: 150rpx; width: 150rpx;}
.carts-cnt .carts-info{display: flex; flex-direction: column; justify-content: space-between; min-height: 150rpx;}
.carts-cnt .carts-title{font-size: 28rpx;}
.carts-cnt .carts-subtitle{display: flex; flex-direction: row; font-size: 28rpx;}
.carts-list .carts-item .carts-del{position: absolute; top: 20rpx; right: 10rpx;}
/*数量加减*/
.carts-num{border: 1rpx solid #aaa; border-radius: 5rpx; display: flex; align-items: center; align-self: flex-end; text-align: center; height: 50rpx;}
.carts-num input{border-left: 1rpx solid #aaa; border-right: 1rpx solid #aaa; font-size: 30rpx; font-family: arial; height: 50rpx; line-height: 50rpx; width: 80rpx;}
.carts-num .minus, .carts-num .plus{color: #000; text-align: center; line-height: 50rpx; width: 40rpx;}
.carts-num .minus{font-size: 30rpx;}
.carts-num .minus.disabled{color: #ccc;}
.carts-num .plus{font-size: 34rpx;}
===主张原创设计，拒绝数量、追求质量！
===独特的设计风格，体现企业品牌文化。
===建立营销型网站，全新清新风格，协助每个用户更加高效的工作。
===追求完美是我们一贯的信念。我们重视每一个细节，每个作品都细心雕琢，精确到像素级。
——>>> QQ：282310962 微信：xy190310
