微信小程序电商平台购物车交互功能。包括选择，改变数量，删除
cart.wxml页面

block wx:for="{{items}}" wx:for-index="bindex"  view class='b_head'    image class='b_select' src="{{item.isSelect ? '/images/common/selected.png' : '/images/common/no_select.png'}}" data-bindex="{{bindex}}" bindtap='b_select'/image    view class='ruzhu' hidden="{{item.supplier_id0 ? false :true}}"      text class='b_flag'入驻商家/text      text class="bname"{{item.supplier_name}}/text    /view    view class='ziying' hidden="{{item.supplier_id == 0 ? false :true}}"-平台自营商品-/view  /viewblock wx:for="{{item.goods_list}}" view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-bindex="{{bindex}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove"  view class="content"  image class='select' src="{{item.isSelect ? '/images/common/selected.png' : '/images/common/no_select.png'}}" bindtap='single_select' data-bindex="{{bindex}}" data-index="{{index}}"/image   image class='thumb' src="{{item.goods_thumb}}"/image  view class='name'{{item.goods_name}}/view  view class="attr"{{item.goods_attr}}/view  view class='price'￥{{item.goods_price}}/view  view class="buy_num"    view class="stepper"      !-- 减号 --      text class="{{minusStatus}}" data-bindex="{{bindex}}" data-index="{{index}}"  data-rec_id="{{item.rec_id}}"  bindtap="bindMinus"-/text      !-- 数值 --      input type="number" bindchange="bindManual" data-bindex="{{bindex}}" data-index="{{index}}"  data-rec_id="{{item.rec_id}}" value="{{item.goods_number}}" /      !-- 加号 --      text class="normal" data-bindex="{{bindex}}"  data-index="{{index}}" data-rec_id="{{item.rec_id}}" bindtap="bindPlus"+/text    /view  /view  /view  view class="del" catchtap="del" data-index="{{index}}" data-bindex="{{bindex}}"删除/view /view /block/blockview class='bottom'  view class='l'  text全选/text  image class='all' src="{{all_select ? '/images/common/selected.png' : '/images/common/no_select.png'}}" data-bindex="{{bindex}}" bindtap='all_select'/image  /view  view class='m'    text合计：/text    text class='price'￥{{total_price}}/text  /view  view class='r'去结算{{cart_count}}件/view/view

cart.wxss 页面

 /*头部  */.b_head{  width: 750rpx;  height: 70rpx;  line-height: 70rpx;  font-size: 24rpx;  border-bottom: 2rpx #ccc solid;  padding: 0 20rpx;  box-sizing: border-box;  background: #F5F5F5;}.b_head .b_select{  width: 34rpx;  height: 34rpx;  float: left;  margin-top:16rpx;}.b_head .ziying{  margin-left: 50rpx;  color: #C62127;}.b_head .ruzhu .b_flag{  margin-left:10rpx;  color: #C62127;}.b_head .ruzhu .bname{  margin-left:20rpx;}.touch-item {  font-size: 14px;  display: flex;  justify-content: space-between;  border-bottom:2rpx solid #ccc;  width: 750rpx;  overflow: hidden}.content {  width: 750rpx;  padding: 20rpx;  line-height: 44rpx;  margin-right:0;  -webkit-transition: all 0.4s;  transition: all 0.4s;  -webkit-transform: translateX(180rpx);  transform: translateX(180rpx);  margin-left: -180rpx;  box-sizing:border-box;  font-size: 24rpx;}.content .select{  width: 34rpx;  height: 34rpx;  float: left;   margin-top:80rpx;}.content .thumb{  width: 180rpx;  height: 180rpx;  margin-left:10rpx;  float: left; }.content .name{  width: 460rpx;  height: 84rpx;  margin-left: 60rpx;  line-height: 42rpx;  margin-top:0rpx;  overflow: hidden;  padding: 10rpx 20rpx;  box-sizing: border-box;}.content .attr{  width: 470rpx;  line-height: 21rpx;  margin-top:10rpx;  padding: 10rpx 20rpx;  margin-left:222rpx;  color:#ccc;}.content .price{  width: 200rpx;  height: 22rpx;  line-height: 22rpx;  margin-top:10rpx;  color: #C62127;  float: left;  padding: 10rpx 20rpx;  box-sizing: border-box;}.del {  background-color: #C62127;  width: 120rpx;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  color: #fff;  -webkit-transform: translateX(180rpx);  transform: translateX(180rpx);  -webkit-transition: all 0.4s;  transition: all 0.4s;}.touch-move-active .content,.touch-move-active .del {  -webkit-transform: translateX(0);  transform: translateX(0);}/*购买  */.content .buy_num {  margin-top:10rpx;  margin-bottom: 10rpx;  font-size: 24rpx;  float: left;}.content .buy_num .font_num{  margin-left: 20rpx;}/*主容器*/.content .buy_num .stepper {    width: 200rpx;    height: 52rpx;    /*给主容器设一个边框*/    border: 2rpx solid #ccc;    border-radius: 3px
            

              

                点击这里免费试用，快速创建您的专属小程序
              
              

                标签：
                微信小程序
                小程序
                小程序是什么
              
            
            
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。