用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序实战商城系列《三》购物数量加减

纸飞机 2018-3-8 09:33

作者:michael_ouyang,来自原文地址 我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: 在宝贝详情页里: 在购物车里: 现在就为大家介绍这个小组件,在中,该如何去写 下图为本项目的图: wxml ...

作者:michael_ouyang,来自

原文地址


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

在购物车里:

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

wxml:

  1. class="stepper">
  2. class="{{minusStatus}}" bindtap="bindMinus">-
  3. type="number" bindchange="bindManual" value="{{num}}" />
  4. class="normal" bindtap="bindPlus">+

wxss:

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

js:

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

运行结果:

demo下载地址:

购物数量加减.zip

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏