【uniapp】swiper组件touch事件和click兼容问题

如果swiper组件加了touch事件和click事件都加了,会触发的很不灵敏,有时候click事件不触发

案例

这种情况click偶尔会失效

javascript 复制代码
<template>
<swiper @touchstart="touchStart" @touchcancel="touchEnd" @touchend="touchEnd">
	<swiper-item @click="onClick">...</swiper-item>
</swiper>
</<template>

解决思路

不加click,利用touch事件的按下和抬起的位置和时间长度来判断是点击还是滑动

javascript 复制代码
touchStart(e) {
	this.touchxy = {
		x: e.changedTouches[0].clientX,
		y: e.changedTouches[0].clientY,
		time: e.timeStamp
	}
	....
},
touchEnd(e) {
	
		if (Math.abs(e.changedTouches[0].clientX - this.touchxy.x) < 10 && Math.abs(e.changedTouches[0]
				.clientY - this.touchxy.y) < 10 && e.timeStamp - this.touchxy.time < 1000) {
			//点击事件
		}
}
相关推荐
JIseven3 小时前
uniapp页面新手引导
java·前端·uni-app
不如摸鱼去5 小时前
uni-app 也能远程调试?使用 PageSpy 打开调试的新大门!
前端·小程序·uni-app
小徐_233317 小时前
uni-app 也能远程调试?使用 PageSpy 打开调试的新大门!
前端·微信小程序·uni-app
00后程序员张21 小时前
HTTPS Everywhere 时代的抓包挑战,从加密流量解析到底层数据流捕获的全流程方案
网络协议·http·ios·小程序·https·uni-app·iphone
草字21 小时前
uniapp 悬浮按钮支持可拖拽。可移动。
前端·javascript·uni-app
速易达网络1 天前
Uniapp + Coze智能在线课程平台应用实现方案
uni-app
Qlittleboy1 天前
uniAPP开发 image 标签的@error事件不被触发调用怎么办
uni-app
吳所畏惧1 天前
少走弯路:uniapp里将h5链接打包为apk,并设置顶/底部安全区域自动填充显示,阻止webview默认全屏化
android·安全·uni-app·json·html5·webview·js
2501_915921431 天前
Bundle Id 创建与管理的工程化方法,一次团队多项目协作中的流程重构
服务器·ios·小程序·重构·https·uni-app·iphone
2501_915909061 天前
深度解析 iOS 内存占用,构建多工具协同的内存诊断、监控与优化体系
android·ios·小程序·https·uni-app·iphone·webview