我們在購買寶貝的時候，購物的數量，經常是我們需要使用的，如下所示： 
在寶貝詳情頁里：

在購物車里：

現在就為大家介紹這個小組件，在小程序中，該如何去寫 
下圖為本項目的圖：

wxml：

1. [html] view plain copy
2. <!-- 主容器 -->
3. <view class="stepper">
4. <!-- 減號 -->
5. <text class="{{minusStatus}}" bindtap="bindMinus">-</text>
6. <!-- 數值 -->
7. <input type="number" bindchange="bindManual" value="{{num}}" />
8. <!-- 加號 -->
9. <text class="normal" bindtap="bindPlus">+</text>
10. </view>

wxss：

1. [css] view plain copy
2. /*全局樣式*/
3. page {
4. padding: 20px 0;
5. }
6.  
7. /*主容器*/
8. .stepper {
9. width: 80px;
10. height: 26px;
11. /*給主容器設一個邊框*/
12. border: 1px solid #ccc;
13. border-radius: 3px;
14. margin:0 auto;
15. }
16.  
17. /*加號和減號*/
18. .stepper text {
19. width: 19px;
20. line-height: 26px;
21. text-align: center;
22. float: left;
23. }
24.  
25. /*數值*/
26. .stepper input {
27. width: 40px;
28. height: 26px;
29. float: left;
30. margin: 0 auto;
31. text-align: center;
32. font-size: 12px;
33. /*給中間的input設置左右邊框即可*/
34. border-left: 1px solid #ccc;
35. border-right: 1px solid #ccc;
36. }
37.  
38. /*普通樣式*/
39. .stepper .normal{
40. color: black;
41. }
42.  
43. /*禁用樣式*/
44. .stepper .disabled{
45. color: #ccc;
46. }

js：

1. [javascript] view plain copy
2. Page({
3. data: {
4. // input默認是1
5. num: 1,
6. // 使用data數據對象設置樣式名
7. minusStatus: 'disabled'
8. },
9. /* 點擊減號 */
10. bindMinus: function() {
11. var num = this.data.num;
12. // 如果大于1時，才可以減
13. if (num > 1) {
14. num --;
15. }
16. // 只有大于一件的時候，才能normal狀態，否則disable狀態
17. var minusStatus = num <= 1 ? 'disabled' : 'normal';
18. // 將數值與狀態寫回
19. this.setData({
20. num: num,
21. minusStatus: minusStatus
22. });
23. },
24. /* 點擊加號 */
25. bindPlus: function() {
26. var num = this.data.num;
27. // 不作過多考慮自增1
28. num ++;
29. // 只有大于一件的時候，才能normal狀態，否則disable狀態
30. var minusStatus = num < 1 ? 'disabled' : 'normal';
31. // 將數值與狀態寫回
32. this.setData({
33. num: num,
34. minusStatus: minusStatus
35. });
36. },
37. /* 輸入框事件 */
38. bindManual: function(e) {
39. var num = e.detail.value;
40. // 將數值與狀態寫回
41. this.setData({
42. num: num
43. });
44. }
45. })

運行結果：