先上预览图:
请添加图片描述

最近有一个自己的项目需要让用户能够长按录音,
看了一下uniapp的插件市场没有合适的插件可以直接用,
遂自己写一个。

整个开发下来,核心就是longpress事件、touch事件。

首先是longpress,也就是用户长按某个view时,可以触发的事件“

<view @longpress="longpress">我是按钮</view>
longpress(){
	// 如果你希望用户按的时间长一些,这里可以用settimeout包裹你的逻辑
}

然后是touch事件,主要分为start/move/end三个,均绑定在按钮上

<view @touchstart="touchStart" @touchmove="touchMove" @touchend="endRecord">我是按钮</view>

分别来说一下

touchStart(e){
	// 无论你是否绑定longpress,只要手指触摸这个view,就触发start
	// 这里我们需要记录此时的坐标
	this.startTouchData.clientX = e.changedTouches[0].clientX; //手指按下时的X坐标
	this.startTouchData.clientY = e.changedTouches[0].clientY; //手指按下时的Y坐标
}
touchMove(e){
	// 触摸后继续移动手指时,将触发这个事件
	// 这里我们根据每次移动的坐标变化判断是向上还是向下滑动
	let touchData = e.touches[0]; //滑动过程中,手指滑动的坐标信息 返回的是Objcet对象
	let moveX = touchData.clientX - this.startTouchData.clientX;
	let moveY = touchData.clientY - this.startTouchData.clientY;
	if (moveY < -50) {
		// 向上滑动
		this.recording = false;
	} else {
		// 向下滑动
		this.recording = true;
	}
}
endRecord(){
	// 最后就是松手、结束触摸
	// 这里分为两种情况
	// 也就是当已经监听到你向上滑动时,松手则取消录音
	// 当监听到没有移动、或是向下滑动时,则完成录音
	if (this.recording) {
		// 完成录音
	} else {
		// 此时松手后响应的是取消录音
	}
}

基本逻辑就是这样,剩下的就是写样式,这里就不再单独说。
开头动图里的那个已经以插件形式发布到dcloud的插件市场,
可以进行非常高自由度的定义,同时也是免费,有需要可以自取。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐