微信小程序多个计数器加减

效果

• 想要点击计数器1的时候计数器1的值加减，点击计数器2的时候计数器2的值加减

GitHub

wxml

` - + {{item.title}}

js

data: {
    door: [
      {
        value: 1,
        title: "出口",
      },
      {
        value: 1,
        title: "入口",
      },
    ],
  },
  
  /*
   * 事件：计数器点击
   * 参数：
   *    index：当前被点击计数器的索引值
   *    type值：0-减 ，1-加
   */
  counterClick(e) {
    let index = e.currentTarget.dataset.index;
    let type = e.currentTarget.dataset.type;

    if (type == 0) {
      --this.data.door[index].value;
    } else {
      ++this.data.door[index].value;
    }

    this.setData({
      door: this.data.door,
    });
  },

wxss

 /* 计数器 */
.select_item  {
  height: 90rpx;
}
.select_item .counter {
  height: 48rpx;
}

.select_item .counter .input {
  font-size: 28rpx;
  color: #333;
  width: 40rpx;
  border: 1px solid #ccc;
  height: 100%;
  text-align: center;
}

.select_item .counter .btn {
  font-size: 28rpx;
  color: #333;
  width: 40rpx;
  height: 100%;
}

.select_item .counter .sub {
  border: 1px solid #ccc;
  border-radius: 12rpx 0 0 12rpx;
  border-right: none;
}

.select_item .counter .add {
  border: 1px solid #ccc;
  border-radius: 0 12rpx 12rpx 0;
  border-left: none;
}