Increase or decrease in the number of WeChat Mini Programs

In the WeChat applet, when doing the part of the shopping cart function, it involves the function of increasing and decreasing the product. Generally speaking, the function of this part is mainly an event. When clicking "-", a function that reduces the number is bound. When the function is reduced to 1, it will no longer decrease. When the "+" sign is clicked, the function of increasing the number is bound. I will initially design one. The first is to define a num variable in data:

  data: {
    num:0
  },

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

<!-- wxml -->
<view class="myview">
  <text>-</text>
  <text>{
   
   {num}}</text>
  <text>+</text>
</view>
 
 
 
/* wxss */
.myview{
  font-size: 50rpx;
  display: flex;
  flex-direction: row;
  text-align: center;
  justify-content: space-around;
  border: 1rpx solid black;
  border-radius:30rpx
}

At present, there is no binding event for addition and subtraction. Then we design the function of addition and subtraction. Bind a decrease function to "-" and an increase function to "+", then the code in wxml It will look like this:

<!-- wxml -->
<view class="myview">
  <text bindtap="decrease">-</text>
  <text>{
   
   {num}}</text>
  <text bindtap="increase">+</text>
</view>

After that, add the specific implementation of these two functions in the js file. If the current value is 1 during the reduction, then the reduction cannot be continued for a long time:

  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
    })
  }

Now the effect is like this:

At this point, the desired function has been realized, and then one such function is expanded into multiple functions. Without too much introduction, just give the code directly, the code is as follows:

js file:

//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 file:

<!-- wxml -->
<view wx:for="{
   
   {num}}" wx:key="index">
  <view class="myview">
    <text bindtap="decrease" data-index="{
   
   {index}}">-</text>
    <text>{
   
   {item}}</text>
    <text bindtap="increase" data-index="{
   
   {index}}">+</text>
  </view>
</view>
<view style="margin-top:50rpx; text-align:center; font-size:50rpx">
  <text>总和：{
   
   {total}}</text>
</view>

wxss file:

/* 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
}

Final effect:

Increase or decrease in the number of WeChat Mini Programs

Guess you like