小程序购物车 数量加减功能

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

在宝贝详情页里：

在购物车里：

 

现在就为大家介绍这个小组件，在小程序中，该如何去写

下图为本项目的图：

 

 

wxml：

[html]  view plain  copy

 

1. <!-- 主容器 -->  
2. <view class="stepper">  
3.     <!-- 减号 -->  
4.     <text class="{{minusStatus}}" bindtap="bindMinus">-</text>  
5.     <!-- 数值 -->  
6.     <input type="number" bindchange="bindManual" value="{{num}}" />  
7.     <!-- 加号 -->  
8.     <text class="normal" bindtap="bindPlus">+</text>  
9. </view>  

 

wxss：

 

[css]  view plain  copy

 

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

 

 

js：

[javascript]  view plain  copy

 

1. Page({  
2.     data: {  
3.         // input默认是1  
4.         num: 1,  
5.         // 使用data数据对象设置样式名  
6.         minusStatus: 'disabled'  
7.     },  
8.     /* 点击减号 */  
9.     bindMinus: function() {  
10.         var num = this.data.num;  
11.         // 如果大于1时，才可以减  
12.         if (num > 1) {  
13.             num --;  
14.         }  
15.         // 只有大于一件的时候，才能normal状态，否则disable状态  
16.         var minusStatus = num <= 1 ? 'disabled' : 'normal';  
17.         // 将数值与状态写回  
18.         this.setData({  
19.             num: num,  
20.             minusStatus: minusStatus  
21.         });  
22.     },  
23.     /* 点击加号 */  
24.     bindPlus: function() {  
25.         var num = this.data.num;  
26.         // 不作过多考虑自增1  
27.         num ++;  
28.         // 只有大于一件的时候，才能normal状态，否则disable状态  
29.         var minusStatus = num < 1 ? 'disabled' : 'normal';  
30.         // 将数值与状态写回  
31.         this.setData({  
32.             num: num,  
33.             minusStatus: minusStatus  
34.         });  
35.     },  
36.     /* 输入框事件 */  
37.     bindManual: function(e) {  
38.         var num = e.detail.value;  
39.         // 将数值与状态写回  
40.         this.setData({  
41.             num: num  
42.         });  
43.     }  
44. })  

运行结果：

转载于:https://www.cnblogs.com/xiaobai-y/p/7234506.html