勉强实现了uni-app监听长按事件时长问题

前言

在开发uni-app项目的时候，涉及到一个长按警报功能，但uni提供的@longpress/@longtap的默认时间比较短，不符合预期；在一番百度后，虽然也无果，但好像想到了什么，于是便动手试了一下。。。

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、@longpress/@longtap 长按监听

这个长按监听的默认时长没查到，有说350ms的，有说500ms。在uni中，最好还是使用@longpress更佳。详细参考

https://ask.dcloud.net.cn/article/36059
或
https://www.cnblogs.com/sky-chen/p/11084695.html
其实这俩基本一样，官方只说了个推荐使用@longpress
https://uniapp.dcloud.io/vue-basics?id=事件映射表

二、解法思维历程

1.各种查

遇到问题，肯定会去各种查，但这个问题，居然实在查不到？要不然效果并不理想，要不然直接被回答“改不了”。。。所以就，真的？改不了了么？

emm，等等，setTimeout()延迟。。。好像并不能解决时间没按够就松手 便取消方法调用的问题，因为按过了@longpress的默认时长，方法还是会被调用，只是被推迟了。。。被 推 迟 了emmmm，要是，被推迟以后，执行时，有个状态判断？ 就判断此时是否还在touch，进而决定是否执行。哎，好像还不错，好像可以，但这个touch状态的判断。。。定义一个变量？去代表touch状态? 。值得一试，于是动手。

2.第一版

代码如下（示例）：

<view  class="" @longpress="toLongTap" @touchend="endTouch">
	<view class="nav-name">Emergency</view>
</view>
<view class="" :class="countdownStart?'display':'nodisplay'">
	警报倒计时
</view>

	export default {
		name: "basics",
		data() {
			return {
				countdownStart: false,	//这个用来决定倒计时出不出现的
				ifLongtap: false,		//这个用来代表是否在按
			}；
		},
		methods: {
			/**长按后调用*/
			toLongTap(){
				this.ifLongtap = true;
				var _this = this;
				console.log("在按了...");
				setTimeout(function(){
					_this.startTouch();
				},1300);
			},
			startTouch(){
				if(this.ifLongtap){
					console.log("按够了...");
					this.countdownStart = true;
				}				
			},
			//不触摸后调用
			endTouch(){
				console.log("不按了...");
				this.ifLongtap = false;
				this.countdownStart = false;
			},
		}
	}

其实此时已是最终的代码↑
写完测试一看，哎，可以了，我还真TM是个天才。但仔细一看，这都设置延迟了，我还用@longpress作甚，直接@tap，不也一样么
然后立马又改成@tap测试

3.第二版

这里不上代码了，就是把上面@longpress改为@tap，其他不变
但实际效果却出了很大的问题，点完之后，不管是否按够时间，倒计时在延迟后都会出现，通过观察控制台发现了端倪：

发现这里的执行顺序，是先@touchend，再@tap,有点纳闷，然后想起刚才查延迟方法的时候瞥到一眼有关监听执行顺序的文章，回去一番才知道：

@tap执行顺序为touchstart→touchend→tap
@longtap执行顺序touchstart → longtap → touchend → tap
@longpress执行顺序touchstart → longpress → touchend

详情请看https://blog.youkuaiyun.com/weixin_45492145/article/details/103305040

4.第三版

所以，最终的是使用@touchstart去调用最佳，当然@longpress也可以用，但注意的是，用@longpress时的实际长按时间是它自身默认的时长+你setTimeout()设置的时长的总和

---

总结

打工人，打工魂，打工都是人上人！下班！

---

更新

• 当天下午，就又发现了这篇文章，也可以参考一下↓

https://blog.youkuaiyun.com/loyd3/article/details/116199010