简介

这是一个用微信小程序原生代码实现的数量加减demo，主要是用于商品购物车或者商品详情修改数量使用，很简单哦~~~。

核心js方法说明

addCount（增加数量）delCount （减少数量）getCount（获取数量）

实现效果如下图所示：

实现步骤

1、页面布局

count.wxml 增加主容器代码和提交button

<!-- 主容器 -->  <view class="stepper">  <!-- 减号 -->  <text class="sign {{num <= 1 ? 'disabled' : 'normal'}}" bindtap="delCount" data-index="{{index}}">-</text>  <!-- 数值 -->  <input class="number" type="number" bindchange="bindManual" value="{{num}}" disabled="disabled"/>  <!-- 加号 -->  <text class="sign {{num >= 10 ? 'disabled' : 'normal'}}" bindtap="addCount" data-index="{{index}}">+</text>  </view> <button bindtap="getCount">提交</button>

2、添加页面wcss样式

count.css

设置全局样式page {  background: #EDEDED;} 

设置主容器样式

/*主容器*/ .stepper {  width:130px;  height: 40px;  /*给主容器设一个边框*/  border: 1rpx solid #818284;  border-radius: 3px;  margin:20px auto;  background: white;}  /*加号和减号*/ .stepper .sign {  width: 40px;  line-height: 40px;  text-align: center;  float: left; }  /*数值*/ .stepper .number {  width: 48px;  height: 40px;  float: left;  margin: 0 auto;  text-align: center;  font-size: 16px;  color: #000000; /*给中间的input设置左右边框即可*/  border-left: 1rpx solid #818284;  border-right: 1rpx solid #818284; }  /*普通样式*/ .stepper .normal{  color: black; } /*禁用样式*/ .stepper .disabled{  color: #ccc; } 

设置button按钮样式

button{ width: 90%; color: white; background:#DFB741; margin:30px auto; }

3、编写js数据交互

数字初始化为1

 /** * 页面的初始数据 */ data: { num:1 },

addCount 点击“+”号，增加数字

 /* 加数 */ addCount: function (e) { console.log("刚刚您点击了加1"); var num = this.data.num; // 总数量-1  if (num < 1000) { this.data.num++; } // 将数值与状态写回  this.setData({ num: this.data.num }); },

delCount 点击“-”号，减少数字

 /* 减数 */ delCount: function (e) { console.log("刚刚您点击了减1"); var num = this.data.num; // 商品总数量-1 if (num > 1) { this.data.num--; } // 将数值与状态写回  this.setData({ num: this.data.num }); },

getCount 获取设置的结果

 getCount: function (e) { var num = this.data.num; console.log(num); wx.showToast({ title: "数量：" + num + "", }) }

好了，demo已经完成感觉测试一下吧！

微信小程序微商城系列

微信小程序实战篇：小程序之页面数据传递

小程序微商城（一）：https框架搭建并实现导航功能

微信小程序微商城（二）：电商首页轮播、分类导航和新品特卖实现

小程序微商城（三）：电商首页无限下拉刷新动态API数据实现

微信小程序微商城（四）：动态API实现商品详情页（上）

微信小程序微商城（五）：动态API实现商品详情页（下）

微信小程序微商城（六）：动态API实现新品特卖商品流式布局

微信小程序微商城（七）：动态API实现商品分类

微信小程序微商城（八）：缓存实现商品购物车功能

微信小程序微商城（九）：微信授权并实现个人中心页面页面

微信小程序微商城（十）：用户收货地址管

备注

微信小程序微商城系列 都是通过https 动态获取数据并展示的，建议从第一篇开始阅读。大家多多支持本系列文章会继续更新下去，谢谢各位！大家在使用过程中有哪些建议可以提出来，我们一起学习哈~~~