上一篇,我们有讲到如何造一个购物车弹层。今天来说一下,购物车数量的加减如何实现。

主要思路就是在data里面定义一个属性,属性值就是这个数量。点击+的时候就+1,点击-的时候就-1,再结合setData更改这个数字。当数字等于1的时候,要给-的按钮添加一个disabled的属性。

wxml代码:

<view class='row item-center'>
  <button class="buy-num-btn btn-minus" disabled="{{minusStatus}}" plain='ture' bindtap='minusNum'>-</button>
  <input class='buy-num-txt' type='number' value='{{courseCount}}'></input>
  <button class="buy-num-btn btn-add" plain='ture' bindtap='addNum'>+</button>
</view>

样式文件我就不展示了,自己发挥~

js代码:

Page({

  /**
* 页面的初始数据
*/
data: {
minusStatus: true,
courseCount: 1,
},
//数字加1
addNum: function() {
var courseCount = this.data.courseCount;
courseCount++;
this.setData({
courseCount: courseCount,
minusStatus: false
})
},
//数字减1
minusNum: function() {
var courseCount = this.data.courseCount;
if (courseCount > 1) {
courseCount--;
}
//数字<=1时,开启 - 按钮的disable状态
var minusStatus = courseCount <= 1 ? true : false;
this.setData({
courseCount: courseCount,
minusStatus: minusStatus
});
}
})

给大伙瞅瞅效果:

4不4感觉超~~简单的~~

微信小程序——购物车数字加减的更多相关文章

  1. 微信小程序 唯一标识 加减

    var nums = 'goods_list[' + e.currentTarget.dataset.indexs+'].goods_num' //console.log(nuns) var num ...

  2. 微信小程序购物车产品计价

    微信小程序购物车产品计价: 问题:当选中商品,价格累加时会出现无限循环小数 解答:在计算前先parseFloat(变量),再计算的最后使用(变量).toFixed(2)保留两位小数 例如: jiaCa ...

  3. 微信小程序之下拉加载和上拉刷新

    微信小程序下拉加载和上拉刷新两种实现方法 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性       ...

  4. 微信小程序全选,微信小程序checkbox,微信小程序购物车

    微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组  1.标题titl ...

  5. 微信小程序-工具无法加载本地模拟开发服务的解决办法

    微信小程序开发工具出现如下问题: 因为网络代理软件或者 VPN 影响,工具无法加载本地模拟开发服务  请尝试以下任一解决方案1.关闭相关网络代理软件,重新编译成功后,再启动相关网络代理软件: 2.配置 ...

  6. 微信小程序上拉加载下拉刷新

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

  7. 微信小程序下拉加载下一页

    小程序做得多了,有些常用功能就有必要记录一下 请看详解: 微信小程序之下拉触底时加载下一页 wxml参考: <scroll-view class='dataContainer' scroll-y ...

  8. 微信小程序下拉加载和上拉刷新两种实现方法

    方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 设置js里onPullDownRefresh和onR ...

  9. 购物车数字加减按钮HTML+CSS+JS(有需要嫌麻烦的小伙伴拿走不谢)

    之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...

随机推荐

  1. 利用Regsvr32绕过Applocker的限制策略

    Metasploit Metasploit框架有一个特定的有效载荷,可用于通过Regsvr32实用程序实现自动化绕过AppLocker exploit/windows/misc/regsvr32_ap ...

  2. linux命令分享一:压缩命令

    Linux操作系统中,*.zip.*.tar.*.tar.gz.*.tar.bz2.*.tar.xz.*.jar.*.7z等格式的压缩与解压 zip格式 压缩: zip -r [目标文件名].zip ...

  3. 安装/移除 MySQL 服务

    MySQL Community Server 下载:https://dev.mysql.com/downloads/mysql/ 以下内容使用的版本为:mysql-5.7.17-win32.zip 1 ...

  4. [CTCI] 双栈排序

    双栈排序 题目描述 请编写一个程序,按升序对栈进行排序(即最大元素位于栈顶),要求最多只能使用一个额外的栈存放临时数据,但不得将元素复制到别的数据结构中. 给定一个int[] numbers(C++中 ...

  5. 【Unity】12.3 Off Mesh Link组件

    开发环境:Win10.Unity5.3.4.C#.VS2015 创建日期:2016-05-09 一.简介 Off Mesh Link组件用于手动指定路线来生成分离的网格连接.例如,游戏中让行进对象上下 ...

  6. 关于在node项目使用ioredis遇到的几个坑

    1,在ioredis中使用redis命令的方法的时候,如果有2个以上的参数,必须使用then方法来接收返回的结果,比如: redis.hget('key','field').then(function ...

  7. FFmpeg(2)-avformat_open_input()函数详解并示例打开mp4文件

    一. 解封装 pts 是显示的时间 dts是解码的时间, 这个时间是用来做同步. av_register_all(), 注册所有的格式.包括解封装格式和加封装格式. avformat_network_ ...

  8. Market Guide for AIOps Platforms

    AIOps platforms enhance IT operations through greater insights by combining big data, machine learni ...

  9. angular学习笔记(三十)-指令(1)-概述

    之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...

  10. 构造函数 (C++)

    构造函数是一种可初始化其类的实例的成员函数. 构造函数具有与类相同的名称,没有返回值. 构造函数可以具有任意数量的参数,类可以具有任意数量的重载构造函数. 构造函数可以具有任何可访问性(公共.受保护或 ...