uniapp在app上如何实现类似微信按住不放发送语音的功能？

这个需要用到三个事件

首先给按钮是绑定事件，需要给按钮绑定三个事件1.touchstart事件会在触摸按钮时触发，可以获取手指的初始坐标；2.touchmove事件在触摸后移动手指时触发，可以用来计算手手指的滑动距离；3.touchend事件在松开手指时候触发。

<button type="default" 
 v-show="mode === 'voice'" 
 @touchstart="handleTouchStart"
 @touchmove="handleTouchMove"
 @touchend="handleTouchEnd"
>按住 说话</button>

const recorderManager = uni.getRecorderManager();
// 开始录制语音
handleTouchStart(e){
	this.mask = true;
	recorderManager.start();
	this.length = 1;
	this.startX = e.touches[0].pageX;
	this.startY = e.touches[0].pageY;
	...

点击查看剩余70%

还有一个页面遮罩层

<!-- 语音遮罩层 -->
<view class="voice-mask" v-show="mask">
	<!--语音条 -->
	<view class="voice-bar voice-del" :class="{voiceDel:needCancel}" :style={width:getVoiceBarWidth}>
		<image src="../static/icon/wave.png" class="voice-volume" :class="{volumeDel:needCancel}"></image>
		<view class="trangle-bottom" :class="{trangleDel:needCancel}"></view>
	</view>
	<!-- 底部区域 -->
	<view class="voice-send">
		<!-- 取消和转文字图标 -->
		<view class="voice-middle-wrapper">
			<!-- 取消 -->
			<view class="voice-left-wrapper">
				<view class="cancel-del" :class="{delTip:needCancel}">松开 取消</view>
				<view class="voice-middle-inner close" :class="{bigger:needCancel}">
					<image src="../static/icon/close-grey.png" class="close-icon"></image>
				</view>
			</view>
			<!-- 转文字 -->
			<view class="voice-middle-inner to-text">
				<text class="wen">文</text>
				<!-- <image src="" class="wen"></image> -->
			</view>
			<view class="send-tip" :class="{sendTipNone:needCancel}">松开 发送</view>
		</view>	
		<!-- 底部语音按钮 -->
		<view class="mask-bottom">
			<image src="../static/icon/voice-left.png"></image>
		</view>
	</view>	
</view>
 
 
......
 
<style>
   .voice-mask{
		position:fixed;
		top:0;
		right:0;
		bottom:0;
		left:0;
		/* display: flex;
		flex-direction: column;
		justify-content:...

点击查看剩余70%