在項目開發過程中遇到,價格和數量需成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
})
},