小程序模板网

微信小程序之购物数量加减 —— 微信小程序实战商城系列(3)

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

 
 
 

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

在购物车里:

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

 

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

运行结果:



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18159.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询