【分享】小程序购物车demo演示实例(全选与不全选、数量加减、价格汇总、删除提示)...

最近由于项目开发需要用到多选、单选、多个数量加减控制，就利用小程序做了个购物车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;}

e709ba194369642d04d979c9cd792967cab48d07

f97feac452f1fd61c94f36ce556354a3332dac4a

a984e24aea8e27ef481cfba25a37946fee3211ad

230a1576620e923f9106d2c23df80dfc79ce0540

fd677f913a2accec71b7532f46c4b9bc9ffb35d5

===主张原创设计，拒绝数量、追求质量！
===独特的设计风格，体现企业品牌文化。
===建立营销型网站，全新清新风格，协助每个用户更加高效的工作。
===追求完美是我们一贯的信念。我们重视每一个细节，每个作品都细心雕琢，精确到像素级。

——>>> QQ：282310962 微信：xy190310