【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) {
			//点击事件
		}
}
相关推荐
2501_915106329 小时前
App HTTPS 抓包 工程化排查与工具组合实战
网络协议·ios·小程序·https·uni-app·php·iphone
dcloud_jibinbin10 小时前
【uniapp】小程序体积优化,分包异步化
前端·vue.js·webpack·性能优化·微信小程序·uni-app
2501_9160088910 小时前
金融类 App 加密加固方法,多工具组合的工程化实践(金融级别/IPA 加固/无源码落地/Ipa Guard + 流水线)
android·ios·金融·小程序·uni-app·iphone·webview
2501_9159214311 小时前
Fastlane 结合 开心上架(Appuploader)命令行版本实现跨平台上传发布 iOS App 免 Mac 自动化上架实战全解析
android·macos·ios·小程序·uni-app·自动化·iphone
游戏开发爱好者813 小时前
iOS 上架要求全解析,App Store 审核标准、开发者准备事项与开心上架(Appuploader)跨平台免 Mac 实战指南
android·macos·ios·小程序·uni-app·iphone·webview
00后程序员张13 小时前
混淆 iOS 类名与变量名的实战指南,多工具组合把混淆做成工程能力(混淆 iOS 类名变量名/IPA 成品混淆Ipa/Guard CLI 实操)
android·ios·小程序·https·uni-app·iphone·webview
2501_9160074717 小时前
iOS文件管理工具深度剖析,从系统沙盒到跨平台文件操作的多工具协同实践
android·macos·ios·小程序·uni-app·cocoa·iphone
shykevin17 小时前
uni-app x开发商城系统,扩展组件uni-ui实现底部商品导航
uni-app
QuantumLeap丶17 小时前
《uni-app跨平台开发完全指南》- 05 - 基础组件使用
vue.js·微信小程序·uni-app
2501_9159184119 小时前
Flutter 加固方案对比与实战,多工具组合的跨平台安全体系(Flutter App 加固/IPA 成品混淆/Ipa Guard CLI/自动化安全流程)
安全·flutter·ios·小程序·uni-app·自动化·iphone