微信小程序-购物车数字加减

1.效果图

2.wxml文件

<!-- 主容器 -->  
<view class="stepper">  
    <!-- 减号 -->  
    <text class="{{minusStatus}}" bindtap="bindMinus">-</text>  
    <!-- 数值 -->  
    <input class="input" type="number" bindchange="bindManual" value="{{num}}" />  
    <!-- 加号 -->  
    <text class="normal" bindtap="bindPlus">+</text>  
</view>  

3.wxxs样式文件

/*主容器*/  
.stepper {  
  display:flex;
  width: 180rpx;  
  height: 60rpx;  
  /*给主容器设一个边框*/  
  border: 1px solid #ccc;  
  border-radius: 30rpx;  
}  

/*加号和减号*/  
.stepper text {  
  width: 50rpx;  
  line-height:60rpx;  
  text-align: center;  
}  

/*数值*/  
.stepper .input {  
  width: 80rpx;  
  height: 60rpx;  
  text-align: center;  
  font-size: 12px;  
  /*给中间的input设置左右边框即可*/  
  border-left: 1px solid #ccc;  
  border-right: 1px solid #ccc;  
}  

/*普通样式*/  
.stepper .normal{  
  color: black;  
}  

/*禁用样式*/  
.stepper .disabled{  
  color: #ccc;  
}  

4.js文件

Component({
  /**
   * 组件的属性列表
   */
  properties: {
      text:{
          type:String,
          value:''
      }

  },

  /**
   * 组件的初始数据
   */
  data: {
    // input默认是1  
    num: 1,  
    // 使用data数据对象设置样式名  
    minusStatus: 'disabled'  
  },

  /**
   * 组件的方法列表
   */
  methods: {
     /* 点击减号 */  
  bindMinus: function() {  
    var num = this.data.num;  
    // 如果大于1时，才可以减  
    if (num > 1) {  
        num --;  
    }  
    // 只有大于一件的时候，才能normal状态，否则disable状态  
    var minusStatus = num <= 1 ? 'disabled' : 'normal';  
      // 将数值传给父组件
    this.triggerEvent("itemChange",{num})
     // 将数值与状态写回
    this.setData({  
        num: num,  
        minusStatus: minusStatus  
    });  
},  
/* 点击加号 */  
bindPlus: function() {  
    var num = this.data.num;  
    // 不作过多考虑自增1  
    num ++;  
    // 只有大于一件的时候，才能normal状态，否则disable状态  
    var minusStatus = num < 1 ? 'disabled' : 'normal';  
    // 将数值与状态写回  
    this.triggerEvent("itemChange",{num})
    this.setData({  
        num: num,  
        minusStatus: minusStatus  
    });  
},  
/* 输入框事件 */  
bindManual: function(e) {  
    var num = e.detail.value;  
    // 将数值与状态写回  
    this.setData({  
        num: num  
    });  
}  
  }
})