微信小程序长按数量自动加减

开发一个微信小程序，有购物车的功能，在测试加减购物车中商品数量时，发现点一下加一或减一太烦，于是添加了长按自动加减的功能。

页面组件

<text class="minus" catchtouchstart='startMinus' catchtouchend='endMinus' data-index="{{index}}" data-goodIndex="{{goodIndex}}">-</text> 
{{good.num}}     <!-- 商品数量 -->
<text class="add" catchtouchstart='startAdd' catchtouchend='endAdd' data-index="{{index}}" data-goodIndex="{{goodIndex}}">+</text>

1.监听触摸开始事件

首先监听触摸开始事件touchstart，记录触摸开始时间，时间后面有用。需要用到定时器，timer用的是页面全局变量。

//按住加号不停地加
startAdd(e){
    startTime = new Date().getTime();  //记录触摸开始时间
    let index = e.currentTarget.dataset.index;
    let goodIndex = e.currentTarget.dataset.goodindex;
    timer = setInterval(()=>{  //定义定时器
        this.data.cartList[index].goodList[goodIndex].num++;
        let sumPrice = 0;
        let count = 0;
        this.data.cartList.map((type, index) => {
        type.goodList.map((good, index) => {
            count += good.num;  //计算商品数量
            if (good.selected) {  //计算选中商品价格
            sumPrice += good.price * good.num;
            }
        });
        });
        this.setData({
            [`cartList[${index}].goodList[${goodIndex}]`]: this.data.cartList[index].goodList[goodIndex],  //购物车列表内容局部刷新
            goodSumPrice: sumPrice,
            cartNum: count > 99 ? '99+' : count
        });
    }, 100);
}

2.监听触摸结束事件

触摸结束，则结束数量加减，清除定时器。记录结束时间，和开始时间比较，根据微信小程序官方文档定义：手指触摸后，超过350ms再离开为长按。反之则认为是点击，执行点击的逻辑，即数量加一。

//结束加
endAdd(e){
    endTime = new Date().getTime(); //记录结束时间
    if((endTime - startTime) < 350000){
        this.clickAdd(e);
    } 
    clearInterval(timer);
}

点击事件逻辑：

//点击加号
clickAdd(e){
  let index = e.currentTarget.dataset.index;
  let goodIndex = e.currentTarget.dataset.goodindex;
  this.data.cartList[index].goodList[goodIndex].num ++;
  let sumPrice = 0;
  let count = 0;
  this.data.cartList.map((type, index) => {
    type.goodList.map((good, index) => {
      count += good.num;
      if (good.selected) {
        sumPrice += good.price * good.num;
      }
    });
  });
  this.setData({
      [`cartList[${index}].goodList[${goodIndex}]`]: this.data.cartList[index].goodList[goodIndex],
      goodSumPrice: sumPrice,
      cartNum: count>99?'99+':count
  });
}

之所以要判断是长按还是点击是因为在标签元素上定义了触摸开始事件后，tap事件就不再触发，所以需要手动调用点击方法。

减号同理，需要注意数量减到0时的操作，我的逻辑是长按数量减到一就停止，再点击减号则删除该商品。

效果图

效果图