微信小程序商城项目之购物数量加减(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 创建Dom元素
May 07 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
小程序实现五星点评效果
Nov 03 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 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
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
python中split方法用法分析
2015/04/17 Python
简单学习Python time模块
2016/04/29 Python
python 用下标截取字符串的实例
2018/12/25 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
python实现图片上添加图片
2019/11/26 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
人力资源专业推荐信
2013/11/29 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
新店开张活动方案
2014/08/24 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
邀请函范文
2015/02/02 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
卫生主题班会
2015/08/14 职场文书
护士旷工检讨书
2015/08/15 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
在Docker容器中部署SQL Server
2022/04/11 Servers