龙空技术网

微信小程序实现一个简单的商品数量加减案例

程序员前沿 154

前言:

目前同学们对“html数量加减”大致比较重视,你们都想要学习一些“html数量加减”的相关知识。那么小编在网摘上搜集了一些关于“html数量加减””的相关资讯,希望小伙伴们能喜欢,小伙伴们快快来了解一下吧!

简介

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

标签: #html数量加减 #购物车加减理论 #购物车数量加减按钮 #购物车加减的数据怎么查