uniapp通过监听longpress、touch事件完成长按录音、滑动取消效果

先上预览图：

最近有一个自己的项目需要让用户能够长按录音，
看了一下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的插件市场，
可以进行非常高自由度的定义，同时也是免费，有需要可以自取。