小程序长按判断 - 实现连续触发事件的技巧

2023-10-03 13:50:44

实现原理

按钮长按判断的原理是：在按钮按下时，启动一个定时器。如果在指定时间内按钮仍然处于按下状态，则认为用户正在长按按钮，并触发相应的事件。如果在指定时间内按钮被松开，则定时器被清除，长按事件不会被触发。

实现步骤

在小程序的.wxml文件中，为按钮添加长按事件监听。
在.js文件中，定义一个定时器变量。
在按钮长按事件监听函数中，启动定时器。
在定时器回调函数中，判断按钮是否仍然处于按下状态。
如果按钮仍然处于按下状态，则触发相应的事件。
如果按钮被松开，则清除定时器。

详细示例

// .wxml
<button bindlongpress="onLongPress">长按我</button>

// .js
Page({
  data: {
    timer: null
  },
  onLongPress() {
    this.startTimer();
  },
  startTimer() {
    this.data.timer = setInterval(() => {
      // 判断按钮是否仍然处于按下状态
      if (this.isButtonStillPressed()) {
        // 触发相应的事件
        this.triggerEvent();
      } else {
        // 清除定时器
        clearInterval(this.data.timer);
      }
    }, 100); // 100ms检查一次
  },
  isButtonStillPressed() {
    // 在这里判断按钮是否仍然处于按下状态
    return true; // 假设这里返回true表示按钮仍然处于按下状态
  },
  triggerEvent() {
    // 在这里触发相应的事件
    console.log('长按事件被触发');
  }
})

注意事项

定时器的间隔时间应根据实际需求进行调整。如果间隔时间太短，可能会导致按钮长按事件被触发多次。如果间隔时间太长，可能会导致用户长按按钮后需要等待较长时间才能触发事件。
在判断按钮是否仍然处于按下状态时，需要考虑按钮的具体实现方式。如果按钮是通过CSS的touch-action: none属性来禁用，则需要使用特殊的技巧来判断按钮是否被按下。
在使用定时器时，需要注意定时器的内存泄漏问题。在不需要定时器时，应及时清除定时器。