我们在购买宝贝的时候，购物的数量，经常是我们需要使用的，如下所示： 
在宝贝详情页里：

在购物车里：

现在就为大家介绍这个小组件，在小程序中，该如何去写 
下图为本项目的图：

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

运行结果：