简介

这是一个用微信小程序原生代码实现的数量加减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;// 商品总数量-1if (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 动态获取数据并展示的，建议从第一篇开始阅读。大家多多支持本系列文章会继续更新下去，谢谢各位！大家在使用过程中有哪些建议可以提出来，我们一起学习哈~~~

微信小程序微商城系列

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

微信小程序实现商品数量加减案例相关推荐

android商品数量加减,微信小程序实现一个简单的商品数量加减案例
简介这是一个用微信小程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用,很简单哦~~~. 核心js方法说明addCount(增加数量) delCount (减少数量) ...
【简易】微信小程序日期Date的加减
微信小程序中获取当前日期可以直接创建Date对象 JavaScript Date 对象想实现两个日期的联动,参考文章写了简单的加减的函数:微信小程序js日期格式转化及加减日期增加的主要代码: // ...
微信小程序开发（2.加减数值和点击图片切换图片）
加减数据绑定 {{msg}} {{num}} 点击事件bindtap="sub" bindtap="add", 在.js中设置msg num 的值, 在.js ...
微信小程序直播商品接口上传图片 300006 goods img upload fail
微信小程序直播商品接口上传图片 300006 goods img upload fail 官方文档:https://developers.weixin.qq.com/miniprogram/dev ...
Python爬虫系列之爬取某社区团微信小程序店铺商品数据
Python爬虫系列之爬取某社区团微信小程序店铺商品数据如有问题QQ请> 点击这里联系我们 < 微信请扫描下方二维码代码仅供学习交流,请勿用于非法用途数据库仅用于去重使用,数据主要存 ...
分享下自己写的一个微信小程序请求远程数据加载到页面的代码
分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1 思路整理就是页面加载完毕的时候请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码我是改的 onload ...
微信小程序开发动感十足的加载动画--都在这里！
微信小程序开发动感十足的加载动画--都在这里.jpg 1. 概述我们在学习微信小程序时,应该会遇到载入图片或者动画需要等待的情况,那么这个等待的画面我们应该怎么编写呢?今天我们就分享这样的小教程. ...
【微信技术-微信小程序】------- 骨架屏(加载流)配置(skeleton-config)及属性详解 (第三篇)
本篇文章是骨架屏(skeleton)配置及属性详解(第三篇) 第一篇文章:[微信技术-微信小程序]-------骨架屏(加载流) 简单入门(第一篇) 第二篇文章:[微信技术-微信小程序]------- ...
微信小程序 - 分享商品海报
我们在微信小程序中经常会使用到分享商品海报,或者是重绘微信小程序分享链的图片功能.实现该功能只要跟着如下几个步骤就可以快速实现啦!(本文示例代码使用的是uni-app,原生或者其他框架需要将uni前缀 ...
微信小程序image图无法加载出来的解决办法（亲测有效）
在微信小程序中,第一次加载页面时图片(线上图)加载不出来/图片灰色背景显示,这个时候该如何解决这个问题呢?请带着问题查看这篇博客,希望对您有所帮助(点赞skr) 看官方文档? 自行解决? 写在前面(初 ...

微信小程序实现商品数量加减案例

简介

实现步骤

1、页面布局

2、添加页面wcss样式

3、编写js数据交互

备注

微信小程序微商城系列

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

微信小程序实现商品数量加减案例相关推荐

最新文章

热门文章