微信小程序 数量增减

       在微信小程序中,做购物车功能的部分的时候,涉及到商品的增加和减少功能,一般来说这部分的功能主要就是事件,当点击“-”时,绑定了一个将数字减少的函数,当减少到1时就不再减少,当点击“+”号时,绑定了将数字增加的功能,我先初步设计一个,首先就是在data中定义一个num变量:

  data: {
    num:0
  },  

之后在wxml页面设计一个加减的框,中间的数字绑定了num,并且简单设计了一下这样的界面



  -
  {{num}}
  +




/* wxss */
.myview{
  font-size: 50rpx;
  display: flex;
  flex-direction: row;
  text-align: center;
  justify-content: space-around;
  border: 1rpx solid black;
  border-radius:30rpx
}

效果是这样的

微信小程序 数量增减_第1张图片

目前来说是没有绑定加减的事件的,接着我们设计一下加减的功能,在“-”号绑定一个decrease的函数,在“+”绑定一个increase的函数,那么wxml中的代码就会是这样了:



  -
  {{num}}
  +

之后在js文件中添加这两个函数的具体实现,其中减的时候如果当前为1,那么久不能继续减了:

  decrease:function(e){
    if(this.data.num == 1){
      wx.showToast({
        title: '不能再减了~',
        icon:'none'
      })
      return ;
    }
    var Num = this.data.num - 1;
    this.setData({
      num: Num
    })
  },
  increase:function(e){
    var Num = this.data.num + 1;
    this.setData({
      num: Num
    })
  }

现在的效果是这样的:

微信小程序 数量增减_第2张图片

 

到此,就已经实现了想要的功能,之后就是将一个这样的功能扩展为多个功能了,不做过多介绍,直接给代码,代码如下:

js文件:

//index.js
Page({
  data: {
    num:[
      1, 1, 1, 1, 1
    ],
    total:0
  },  
  onLoad: function (options) {
    this.getTotal()
  },
  decrease:function(e){
    var index = e.currentTarget.dataset.index;
    console.log(e)
    if(this.data.num[index] == 1){
      wx.showToast({
        title: '不能再减了~',
        icon:'none'
      })
      return ;
    }
    var Num = this.data.num;
    Num[index] --;
    this.setData({
      num: Num
    })
    this.getTotal();
  },
  increase:function(e){
    var index = e.currentTarget.dataset.index;
    var Num = this.data.num;
    Num[index]++;
    this.setData({
      num: Num
    })
    this.getTotal();
  },
  getTotal:function(){
    var temp_num = 0;
    for(var i = 0; i < this.data.num.length; i++){
      temp_num += this.data.num[i]
    }
    this.setData({
      total:temp_num
    })
  }
})

wxml文件:



  
    -
    {{item}}
    +
  


  总和:{{total}}

wxss文件:

/* wxss */
.myview{
  margin-top: 20rpx;
  font-size: 50rpx;
  display: flex;
  flex-direction: row;
  text-align: center;
  justify-content: space-around;
  border: 1rpx solid black;
  border-radius:30rpx
}

最后效果:

微信小程序 数量增减_第3张图片

到此结束

你可能感兴趣的:(小程序)