微信小程序商城项目之购物数量加减(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的一句代码实现表格的简单筛选
Jul 26 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
如何基于js判断浏览器版本
Feb 20 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 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
PHP完整的日历类(CLASS)
2006/11/27 PHP
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
快速入手Python字符编码
2016/08/03 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
学校后勤人员职责
2013/12/27 职场文书
企事业单位求职者的自我评价
2013/12/28 职场文书
法学求职信
2014/06/22 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
班主任先进事迹材料
2014/12/17 职场文书
道歉情书大全
2015/05/12 职场文书
任长霞观后感
2015/06/16 职场文书
2019年工作总结范文
2019/05/21 职场文书