uniapp长按持续触发方法，数量一直加减

请注意：由于之前本人的博文被百度文库收做商用，请各位转载此博客注明出处

最近项目遇见一个需求，需要长按按钮然后一直加减数值，

看了一下uniapp只提供了一个长按时间，等于需求还得自己写

但是长按触发也只是触发一次事件，明显不符合我所需要的一直持续触发数量一直加减

看了一下官方文档，工程化api里面提供了几个触发事件

 

处理的逻辑就为，用户按下按钮  =>  触发了一次长按事件 =>  事件持续触发数量一直加减  =>  用户停止按按钮

我们在这个逻辑中，是不需要按钮开始事件的，这是一个陷阱，

还有个问题便是，不可使用@click方法，需要使用@tap，不然不会触发单击事件

就是直接长按触发“长按事件”之后在data中定义一个计时器为 null 后续使用

等到长按结束时停止定时器，一整个流程就走完了

逻辑已经有了接下来就是直接贴代码吧

<template>
  <view>数量： {{ 1 }}</view>
  <button @tap="numAdd" @longPress="longPress" @touchend="touchend">
    长按触发
  </button>
</template>
<script>
export default {
  data() {
    return {
      num: 1,
      timeOnline: null,
    };
  },
  methods: {
    // 单击事件
    numAdd() {
      that.num = that.num + 1;
    },
    // 长按事件
    longPress() {
      let that = this;
      that.timeOnline = setInterval(() => {
        that.num = that.num + 1;
      }, 200); // 200毫秒触发一次
    },
    // 长按结束了
    touchend() {
      clearInterval(this.timeOnline); // 清除计时器
    },
  },
};
</script>