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

时光斑驳了记忆 2019-04-19 16:38:45 ⋅ 162 阅读

简介

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

微信小程序微商城系列

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

---------------END----------------

后续的内容同样精彩

长按关注“IT实战联盟”哦




全部评论: 0

    我有话说:

    程序-template使用:实现购物车商品数量功能

    上一篇我们实现了购物车功能,里面有用到template模板功能来实现购物车商品数量和价格计算功能......

    程序商城(七):动态API实现商品分类

    程序商品分类页面布局并且调用动态API获取数据

    程序商城(四):动态API实现商品详情页(上)

    1、实现商品详情页面布局(这篇实现3个模块,头部商品图片轮播、商品价格和商品描述、商品详情展示) 2、根据用户点击不同的商品请求API动态数据

    程序电商实战-商品详情(上)

    先看一下今天要实现程序商品详情页吧!

    程序实战篇:商品属性联动选择(案例)

    本期的程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点

    程序商城(六):动态API实现新品特卖商品流式布局

    实现新品特卖商品列表布局、调用动态API获取数据载和点击商品跳转商品详情

    程序电商实战-商品列表流式布局

    今天给大家分享一下程序商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~

    程序商城(九):授权并实现个人中心页面页面

    实现商城授权并获取用户信息和个人中心页面布局

    程序商城(五):动态API实现商品详情页(下)

    加入购物车悬浮框、商品数量、价格计算、收藏和加入购物车功能开发

    程序-Image的widthFix属性和rpm尺寸的使用

    在做程序商品详情页,商品的详情是图片集合,渲染完成后发现图片载的很不自然

    程序商城(八):缓存实现商品购物车功能

    商品详情页将商品信息放入缓存,购物车页面读取缓存获取商品信息,购物车商品计算和删除缓存商品

    程序商城(一):https框架搭建并实现导航功能

    本文将带领大家搭建https的程序框架,并实现动态获取数据展示效果!

    程序电商实战-购物车(下)

    我们继续接着昨天的购物车写,主要把剩下的数量 template 模板、选中计算功能实现掉!

    程序抖音实战-首页(上)

    你也可以用程序编写一个抖音

    程序电商实战-首页(下)

    上一篇:程序电商实战-首页(上)好了,上一期我们把首页搜索、导航栏和广告轮播给做完了,那么接下来会继续

    程序电商实战-首页(上)

    上一篇:程序电商实战-入门篇 嗨,大家好!经过近两周的精心准备终于开始程序电商实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!   首页效果图

    程序实战篇:程序之页面数据传递

    我们在写程序的时候经常会遇到子页面向主页面回传数据或者普通页面跳转到tabBar 页面携带数......

    程序电商实战-商品详情加入购物车(下)

    今天会接着上一篇开始写商品详情页加入购物车的部分,直接看效果......