简介

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

2.核心js方法说明

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

3.实现效果如下图所示：

实现步骤1、页面布局

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

!--主容器--viewclass="stepper"!--减号--textclass="sign{{num=1?'disabled':'normal'}}"bindtap="delCount"data-index="{{index}}"-/text!--数值--inputclass="number"type="number"bindchange="bindManual"value="{{num}}"disabled="disabled"/!--加号--textclass="sign{{num=10?'disabled':'normal'}}"bindtap="addCount"data-index="{{index}}"+/text/viewbuttonbindtap="getCount"提交/button2、添加页面wcss样式

5.count.css设置全局样式

page{background:#EDEDED;}

6.

7.设置主容器样式

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

8.设置button按钮样式

button{width:90%;color:white;background:#DFB741;margin:30pxauto;}3、编写js数据交互

9.数字初始化为1

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

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

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

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

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

12.getCount获取设置的结果

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

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

备注

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

微信小程序微商城系列

15.微信小程序微商城：开发者key获取微信小程序微商城（一）：https框架搭建并实现导航功能微信小程序微商城（二）：电商首页轮播、分类导航和新品特卖实现微信小程序微商城（三）：电商首页福利专场无限下拉刷新动态API数据实现微信小程序微商城（四）：动态API实现商品详情页（上）微信小程序微商城（五）：动态API实现商品详情页（下）微信小程序微商城（六）：动态API实现新品特卖商品流式布局微信小程序微商城（七）：动态API实现商品分类微信小程序微商城（八）：缓存实现商品购物车功能微信小程序微商城（九）：微信授权并实现个人中心页面页面微信小程序微商城（十）：用户收货地址管理

更多精彩内容可以关注“IT实战联盟”公众号哦~~~