Question

我正在尝试创建一个类似于 WhatsApp 语音留言按钮的按钮。那个onHold声音正在录音，并且发布你可以做任何事情。

我在ionic2 doc中搜索过。我确实发现了任何处理onRelease事件的指令。

我找到了一件工作正常的作品。

  @Output('long-press') onPress: EventEmitter < any > = new EventEmitter();
  @Output('long-press-up') onPressUp: EventEmitter < any > = new EventEmitter();




  ngOnInit() {
    this.pressGesture = new Gesture(this.htmlElement);
    this.pressGesture.listen();

    this.pressGesture.on('press', (event) => {
      this.recordVoice();
      this.onPress.emit(event);
    });

    this.pressGesture.on('pressup', (event) => {
      this.stopRecording();
      this.onPressUp.emit(event);
    });
  }

COMPONENT

        <button type="button" clear item-right (long-press)="longPressed()" (long-press-up)="longPressReleased()">
          <ion-icon name="mic"></ion-icon>
        </button>

但是当我按住任何地方时，屏幕this.recordVoice()被执行并且一旦我释放我的手指this.stopRecording()就会出现错误。

我需要onPress和onPressUp只为按钮而不是整页执行。

所以我如何修改上面的代码来修复我需要的东西。

感谢。

Answer 1

我有同样的需求，最终使用了该插件：https://github.com/wbhob/ionic-long-press

然后您可以这样做：

<button ion-button 
    ion-long-press 
    [interval]="400" 
    (onPressStart)="recordVoice()" 
    (onPressing)="recording()" 
    (onPressEnd)="stopRecording()"></button>

如何使用ionic2组件处理onRelease事件？

1 个答案: