+
39
-

小程序touchstart用户快速点击短时间多次触发touchstart问题如何解决?

小程序touchstart用户快速点击短时间多次触发touchstart问题如何解决?

<view class="flex flex-direction">
    <button class="cu-btn lg margin-tb-sm" 
        :class="isRecording ? 'bg-red' : 'bg-blue'"
        @touchstart="startRecording" 
        @touchend="stopRecording" 
        style="height: 80px;">
        <text class="cuIcon-voice"></text>
        {{isRecording ? '松开结束' : '按住不放开始'}}
    </button>
</view>



网友回复

+
2
-

在小程序中,当用户快速点击按钮时,可能会在短时间内多次触发touchstart事件,这可能导致意外的行为,比如多次开始录音。这个问题可以通过添加一个防抖机制来解决。

以下是修改后的代码:

<view class="flex flex-direction">
    <button class="cu-btn lg margin-tb-sm"
        :class="isRecording ? 'bg-red' : 'bg-blue'"
        @touchstart="handleTouchStart"
        @touchend="stopRecording"
        style="height: 80px;">
        <text class="cuIcon-voice"></text>
        {{isRecording ? '松开结束' : '按住不放开始'}}
    </button>
</view>

点击查看剩余70%

我知道答案,我要回答