微信小程序商城项目之购物数量加减(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 相关文章推荐
jQuery选择头像并实时显示的代码
Jun 27 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
JS中判断null的方法分析
Nov 21 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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
php实现jQuery扩展函数
2009/10/30 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
javascript中this指向详解
2016/04/23 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
Vue异步加载about组件
2017/10/31 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
python中单下划线_的常见用法总结
2018/07/10 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
电子商务毕业生求职信
2013/11/10 职场文书
医院护士的求职信
2014/01/03 职场文书
护理专业自荐书
2014/06/04 职场文书
欢迎领导标语
2014/06/27 职场文书
法人委托书
2014/07/31 职场文书
四年级语文教学反思
2016/03/03 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
Python中with上下文管理协议的作用及用法
2022/03/18 Python