微信小程序購物車數量加減功能的實現

 

 

實現一個簡單的數量增減功能

1.wxml

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

2.wxcss

/*全局樣式*/
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;
}

3.js

//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
})
}
})