简介
这是一个用微信小程序原生代码实现的数量加减demo，主要是用于商品购物车或者商品详情修改数量使用，很简单哦~~~。
核心js方法说明addCount(增加数量)
delCount (减少数量)
getCount(获取数量)
实现效果如下图所示：
微信小程序实现一个简单的商品数量加减案例
实现步骤
1、页面布局
count.wxml 增加主容器代码和提交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 动态获取数据并展示的，建议从第一篇开始阅读。大家多多支持本系列文章会继续更新下去，谢谢各位！大家在使用过程中有哪些建议可以提出来，我们一起学习哈~~~
微信小程序实现一个简单的商品数量加减案例
微信小程序实现一个简单的商品数量加减案例
