如果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) {
//点击事件
}
}