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

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

在宝贝详情页里：

在购物车里：

 

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

下图为本项目的图：

 

 

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


运行结果：

posted @ 2017-07-25 15:42  小白菜_y  阅读(12533)  评论(0)  编辑  收藏  举报