微信小程序 实现购物时数量的加减

一：样图

二：.wxml

<view class="stock_jiajian">
        <view class="stockBox" bindtap="addjian">-</view>
        <view class="stockBox nums">
          <input class="stockinnum" bindconfirm="search"  value="{{num}}" bindinput="setValue"></input>
        </view>
        <view class="stockBox" bindtap="addJia">+</view>
      </view>

 

三：.wxss 

.stock_jiajian {
  width: 38%;
  height: 100%;
  float: right;
  margin-top: 7rpx;
}

.stockBox {
  width: 28%;
  height: 80%;
  float: left;
  border: 1rpx solid #DDD9DA;
  text-align: center;
  line-height: 55rpx;
  color: #F54B6F;
  font-size: 45rpx;
}

.nums {
  width: 35%;
  line-height: 65rpx;
  color: #666;
}
.stockinnum{
  width: 100%;
  height: 100%;
  font-size: 40rpx;
}

 

 四：js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    num: 1
  },
 // + - 购买数量
 setValue: function (e) {
  this.setData({
    num: e.detail.value
  });
  console.log(this.data.num);
},
addJia: function (e) {
  var conum;
  var that = this;
  this.data.num ++;
  conum = that.data.num
  console.log(conum)
  that.setData({
    num: conum
  })
},
addjian:function(e){
  var jian;
  var that = this;
  this.data.num --;
  jian = this.data.num;
  that.setData({
    num: jian
  })
  if(jian <= 0){
    wx.showToast({
      title: '数量不能为0哦！',
      icon:"none",
      duration:500
    })
    jian = 1;
    that.setData({
      num:jian
    })
  }
  console.log(jian)
}

})