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

最新推荐文章于 2025-09-13 11:52:28 发布

原创最新推荐文章于 2025-09-13 11:52:28 发布 · 5.3k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #按键事件

一知半解专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在uni-app中遇到长按事件时长无法调整的问题，通过分析事件执行顺序，利用setTimeout结合@touchstart实现自定义长按功能。详细探讨了解决过程及代码实现。

部署运行你感兴趣的模型镜像

前言

在开发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.各种查

遇到问题，肯定会去各种查，但这个问题，居然实在查不到？要不然效果并不理想，要不然直接被回答“改不了”。。。所以就，真的？改不了了么？
改不了i
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,有点纳闷，然后想起刚才查延迟方法的时候瞥到一眼有关监听执行顺序的文章，回去一番才知道：