3、微信小程序学习：加减控件

<!--index.wxml-->
<view class='stepper'>
  <text class='{{minusStatus}}' type='number'  bindtap='bindMinus'>-</text>
  <input bindinput='bindManual' value='{{num}}'></input>
  <text bindtap='bindPlus'>+</text>
</view>

/**index.wxss**/
/*全局样式*/
page {
  padding: 20px 0;
}
/*主容器*/
.stepper {
  width:80px;
  height:26px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 3px;
}
/*加号和减号*/
.stepper text {
  float: left;
  width: 19px;
  line-height: 26px;
  text-align: center;
}
/*数值*/
.stepper input {
  width: 40px;
  height: 26px;
  float: left;
  margin: 0 auto;
  text-align: center;
  font-size: 12px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
/*普通样式*/
.stepper .normal {
  color:black;
}
/*禁用样式*/
.stepper .disable {
  color: #ccc;
}

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
   num:1,
   minusStatus:'disable'
  },
  //事件处理函数
  /*点击减号*/
  bindMinus: function() {
    var num = this.data.num;
    if (num>1) {
      num--;
    }
    var minusStatus = num>1 ? 'normal':'disable';
    this.setData({
      num:num,
      minusStatus:minusStatus
    })
  },
  /*点击加号*/
  bindPlus: function() {
    var num = this.data.num;
    num++;
    var minusStatus = num > 1 ? 'normal' : 'disable';
    this.setData({
      num:num,
      minusStatus: minusStatus
    })
  },
  /*输入框事件*/
  bindManual: function(e) {
    var num = e.detail.value;
    var minusStatus = num > 1 ? 'normal' : 'disable';
    this.setData({
      num:num,
      minusStatus: minusStatus
    })
  }
})

效果图：