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

本文介绍了在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,有点纳闷,然后想起刚才查延迟方法的时候瞥到一眼有关监听执行顺序的文章,回去一番才知道:

@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

您可能感兴趣的与本文相关的镜像

GPT-SoVITS

GPT-SoVITS

AI应用

GPT-SoVITS 是一个开源的文本到语音(TTS)和语音转换模型,它结合了 GPT 的生成能力和 SoVITS 的语音转换技术。该项目以其强大的声音克隆能力而闻名,仅需少量语音样本(如5秒)即可实现高质量的即时语音合成,也可通过更长的音频(如1分钟)进行微调以获得更逼真的效果

### uni-app按与点击事件冲突的解决方案 在uni-app开发中,按和点击事件的冲突是一个常见的问题。当用户在同一个控件上同时绑定`bindtap`(点击事件)和`bindlongtap`(事件)时,可能会出现两者触发条件重叠的情况,导致用户体验不佳[^1]。 以下是两种有效的解决方案: #### 方案一:使用 `bindtap` 和 `bindlongtap` 并设置延迟 通过为 `bindtap` 添加一个延迟时间,可以有效区分点击和事件。例如,当用户按下控件时,启动一个定时器,在一定时间内如果没有触发事件,则执行点击事件;如果触发了事件,则取消定时器[^1]。 ```html <view @touchstart="handleTouchStart" @touchend="handleTouchEnd" @longpress="handleLongPress"> 点击或按我 </view> ``` ```javascript export default { data() { return { clickTimeout: null }; }, methods: { handleTouchStart() { this.clickTimeout = setTimeout(() => { console.log('点击事件触发'); }, 300); // 设置点击事件延迟时间为300ms }, handleTouchEnd() { clearTimeout(this.clickTimeout); // 清除定时器 }, handleLongPress() { console.log('事件触发'); clearTimeout(this.clickTimeout); // 事件触发时清除点击事件的定时器 } } }; ``` #### 方案二:自定义手势识别逻辑 通过监听 `touchstart`、`touchmove` 和 `touchend` 事件,手动实现手势识别逻辑。这种方式更加灵活,可以根据具体需求调整触发条件[^3]。 ```html <view @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"> 自定义手势识别 </view> ``` ```javascript export default { data() { return { startTime: 0, isLongPress: false }; }, methods: { onTouchStart(e) { this.startTime = Date.now(); // 记录触摸开始的时间 this.isLongPress = false; setTimeout(() => { if (!this.isLongPress) { this.isLongPress = true; console.log('事件触发'); } }, 800); // 事件的触发时间为800ms }, onTouchMove() { this.isLongPress = false; // 如果手指移动,则取消事件 }, onTouchEnd() { const endTime = Date.now(); if (!this.isLongPress && (endTime - this.startTime < 800)) { console.log('点击事件触发'); } } } }; ``` 以上两种方案都可以有效解决按和点击事件的冲突问题。开发者可以根据项目需求选择合适的方案。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悯码农

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值