微信小程序电商实战-购物车（下）

IT实战联盟博客：http://blog.100boot.cn 

 

我们继续接着昨天的购物车写，主要把剩下的数量加减 template 模板、选中计算功能实现掉！

template模板

如果拿购物车（上）来做应该会报错的因为引用不到 template模板，接下来我们来实现！

template.wxml

<template name="quantity">
  <!-- 主容器 -->  
  <view class="stepper">  
      <!-- 减号 -->  
      <text class="{
  {count <= 1 ? 'disabled' : 'normal'}}" bindtap="delCount" data-index="{
  {index}}">-</text>  
      <!-- 数值 -->  
      <input type="number" bindchange="bindManual" value="{
  {count}}"  disabled="disabled"/>  
      <!-- 加号 -->  
      <text class="{
  {count >= 10 ? 'disabled' : 'normal'}}" bindtap="addCount" data-index="{
  {index}}">+</text>  
  </view>  </template>

template.wxss

/*主容器*/  .stepper {  
    width:90px;  
    height: 26px;  
    /*给主容器设一个边框*/  
    border: 1rpx solid #000000;  
    border-radius: 3px;  
    margin:0 auto;  
}  
  /*加号和减号*/  .stepper text {  
    width: 24px;  
    line-height: 26px;  
    text-align: center;  
    float: left;  
}  
  /*数值*/  .stepper input {  
    width: 40px;  
    height: 26px;  
    float: left;  
     margin: 0 auto;   
    text-align: center;  
    font-size: 12px;  
    color: #000000;    /*给中间的input设置左右边框即可*/  
    border-left: 1rpx solid #000000;  
    border-right: 1rpx solid #000000;  
}  
  /*普通样式*/  .stepper .normal{  
    color: black;  
}  
  /*禁用样式*/  .stepper .disabled{  
    color: #ccc;  
}  

备注

在这里要特别强调一下 在引用template模板的时候一定要注意路径不要错了，如下图所示我放置的地方：

 

cart.js

勾选事件

  //勾选事件处理函数  
  switchSelect: function (e) {    // 获取item项的id，和数组的下标值  
    var Allprice = 0, i = 0;    let id = e.target.dataset.id,