微信小程序> 微信小程序——购物车数字加减

微信小程序——购物车数字加减

浏览量:4443 时间: 来源:weixin_33739646

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

主要思路就是在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感觉超~~简单的~~

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎