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

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

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

上一篇:在Linux(ubuntu server)上面安装NodeJS的正确姿势


下一篇:/dev/console,/dev/null,/dev/tty