微信小程序商城项目之购物数量加减(3)


Posted in Javascript onApril 17, 2017

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

微信小程序商城项目之购物数量加减(3)

在购物车里:

微信小程序商城项目之购物数量加减(3)

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

微信小程序商城项目之购物数量加减(3)

wxml:

<!-- 主容器 --> 
<view class="stepper"> 
  <!-- 减号 --> 
  <text class="{{minusStatus}}" bindtap="bindMinus">-</text> 
  <!-- 数值 --> 
  <input type="number" bindchange="bindManual" value="{{num}}" /> 
  <!-- 加号 --> 
  <text class="normal" bindtap="bindPlus">+</text> 
</view>

wxss:

/*全局样式*/ 
page { 
  padding: 20px 0; 
} 
 
/*主容器*/ 
.stepper { 
  width: 80px; 
  height: 26px; 
  /*给主容器设一个边框*/ 
  border: 1px solid #ccc; 
  border-radius: 3px; 
  margin:0 auto; 
} 
 
/*加号和减号*/ 
.stepper text { 
  width: 19px; 
  line-height: 26px; 
  text-align: center; 
  float: left; 
} 
 
/*数值*/ 
.stepper input { 
  width: 40px; 
  height: 26px; 
  float: left; 
  margin: 0 auto; 
  text-align: center; 
  font-size: 12px; 
  /*给中间的input设置左右边框即可*/ 
  border-left: 1px solid #ccc; 
  border-right: 1px solid #ccc; 
} 
 
/*普通样式*/ 
.stepper .normal{ 
  color: black; 
} 
 
/*禁用样式*/ 
.stepper .disabled{ 
  color: #ccc; 
}

js:

Page({ 
  data: { 
    // input默认是1 
    num: 1, 
    // 使用data数据对象设置样式名 
    minusStatus: 'disabled' 
  }, 
  /* 点击减号 */ 
  bindMinus: function() { 
    var num = this.data.num; 
    // 如果大于1时,才可以减 
    if (num > 1) { 
      num --; 
    } 
    // 只有大于一件的时候,才能normal状态,否则disable状态 
    var minusStatus = num <= 1 ? 'disabled' : 'normal'; 
    // 将数值与状态写回 
    this.setData({ 
      num: num, 
      minusStatus: minusStatus 
    }); 
  }, 
  /* 点击加号 */ 
  bindPlus: function() { 
    var num = this.data.num; 
    // 不作过多考虑自增1 
    num ++; 
    // 只有大于一件的时候,才能normal状态,否则disable状态 
    var minusStatus = num < 1 ? 'disabled' : 'normal'; 
    // 将数值与状态写回 
    this.setData({ 
      num: num, 
      minusStatus: minusStatus 
    }); 
  }, 
  /* 输入框事件 */ 
  bindManual: function(e) { 
    var num = e.detail.value; 
    // 将数值与状态写回 
    this.setData({ 
      num: num 
    }); 
  } 
})

运行结果:

微信小程序商城项目之购物数量加减(3)

demo下载地址:商城购物数量加减

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript+xml技术实现分页浏览
Jul 27 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
js实现随机点名器精简版
Jun 29 Javascript
js+cavans实现图片滑块验证
Sep 29 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 #Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 #Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 #Javascript
JS简单验证上传文件类型的方法
Apr 17 #Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 #Javascript
巧用weui.topTips验证数据的实例
Apr 17 #Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 #jQuery
You might like
thinkPHP中volist标签用法示例
2016/12/06 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
Python脚本实时处理log文件的方法
2016/11/21 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
python二进制文件的转译详解
2019/07/03 Python
Python:slice与indices的用法
2019/11/25 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
python使用smtplib模块发送邮件
2020/12/17 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
学生个人的自我评价分享
2013/11/05 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
收款委托书范本
2014/09/11 职场文书
2014年财务部工作总结
2014/11/11 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技