小程序成倍加减效果

在项目开发过程中遇到,价格和数量需成10倍的增长,找到一个加减的效果自己改了改,加上了数量和成倍。

WXML

<view>¥{{money}}</view>
<view class='stepper'>
    <text class='{{minusStatus}}' bindtap='bindMinus'>-</text>
     <input bindinput='bindManual' value='{{num}}' disabled='disabled'></input>
     <text bindtap='bindPlus'>+</text>
  </view>

WXSS

/*主容器*/
.stepper {display: inline-block;
  width:120px;
  height:30px;
  margin: 10rpx;
  border: 1px solid #ccc;border-bottom-style: solid;
  border-radius: 3px;
}
/*加号和减号*/
.stepper text {
  float: left;
  width: 30px;
  line-height: 30px;
  text-align: center;font-size: 14px;
}
/*数值*/
.stepper input {
  width: 58px;
  height: 30px;
  float: left;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
/*普通样式*/
.stepper .normal {
  color:black;
}
/*禁用样式*/
.stepper .disable {
  color: #ccc;
}

JS

data:{
	num: 100,
    minusStatus: 'disable',
    money:'299'
},
/*点击减号*/
  bindMinus: function () {
    var num = this.data.num;
    var money = this.data.money;
    if (num > 100) {
      num = num/10;
      money = money/10;
    }
    var minusStatus = num > 100 ? 'normal' : 'disable';
    this.setData({
      num: num,
      money:money,
      minusStatus: minusStatus
    })
    console.log(money);
  },
  /*点击加号*/
  bindPlus: function () {
    var num = this.data.num;
    var money = this.data.money;
    num = num*10;
    money = money * 10;
    var minusStatus = num > 100 ? 'normal' : 'disable';
    this.setData({
      num: num,
      money:money,
      minusStatus: minusStatus
    })
    console.log(money);
  },
  /*输入框事件*/
  bindManual: function (e) {
    var num = e.detail.value;
    var minusStatus = num > 100 ? 'normal' : 'disable';
    this.setData({
      num: num,
      minusStatus: minusStatus
    })
  },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值