小程序的选择输入数量框

记录一下写项目时常用的小东西

wxml

      <view class='choosenumbox'>
        <view class='del' data-type='1' bindtap='countNum'>-</view>
        <view class='num'>
          <input type='number' bindblur='checkNum' bindinput='getInputNum' value="{{num}}"></input>
        </view>
        <view class='add' data-type='2' bindtap='countNum'>+</view>
      </view>

wxss

/*数量框*/
.choosenumbox{
  display: flex;
  border-radius: 10rpx;
  border: 1rpx solid #cfcfcf;
}
.choosenumbox view{
  display: flex;
  justify-content: center;
  width: 50rpx;
  height: 50rpx;
}
.del{
  font-size: 36rpx;
  color: #616161;
}
.add{
font-size: 36rpx;
 color: #616161;
}
.num{
  border-left:1rpx solid #cfcfcf;
  border-right: 1rpx solid #cfcfcf;
}
.num input{
  font-size: 36rpx;
  color: #f22d2d;
  text-align: center;
}

js

// page/index/order/print.js
Page({
  //检查输入数量
  checkNum: function (res) {
    var that = this
    var num = res.detail.value
    if (num <= 0 || num >= 6 || num == "") {
      wx.showToast({
        title: '输入超出范围',
        icon: 'none'
      })
      that.setData({
        num: 1
      })
    }
  },
  //获取输入数量
  getInputNum: function (res) {
    var that = this
    var num = res.detail.value
    that.setData({
      num: parseInt(num)
    })
  },
  //计算数量
  countNum: function (res) {
    var that = this
    var type = res.currentTarget.dataset.type
    var num = that.data.num
    if (type == 1) {
      if (num > 1) {
        that.setData({
          num: parseInt(num - 1)
        })
      }
    }
    if (type == 2) {
      if (num < 5) {
        that.setData({
          num: parseInt(num + 1)
        })
      }
    }
  },
  /**
   * 页面的初始数据
   */
  data: {
    num: 1,
  },

})