小程序实现商品数量加减

又来啦~~~~~
效果页面:

image


  -
  {{count}}
  +

/* pages/home/home.wxss */
.jisuan{
  width: 150rpx;
  height: 50rpx;
  display: flex;
  justify-content: space-between;
  border: 2rpx solid #eee;
  margin: 100rpx 250rpx;
}
.jisuan view:nth-child(2){
  flex: 1;
  text-align: center;
}
.jisuan .tab.jia{
  text-align: center;
  width: 50rpx;
  background: skyblue;
  border-radius: 50%;
}
.jisuan .tab.jian{
   text-align: center;
   width: 50rpx;
  border:  2rpx solid skyblue;
   border-radius: 50%;
}

// pages/home/home.js
Page({
  minus(){
    if (--this.data.count<0) this.data.count = 0
    this.setData({
      count: this.data.count
    })
  },
  add() {
    if (++this.data.count>10) this.data.count = 10
    this.setData({
      count: this.data.count
    })
  },
  
  /**
   * 页面的初始数据
   */
  data: {
    count:0
    
  }
})

你可能感兴趣的:(小程序实现商品数量加减)