//第一个参数,需要侦听手势滑动的元素,第二个参数函数的参数,是滑动的方向,
export const slideAction = (element, fn) => {
let e = null //元素盒子
if (typeof element === 'object') {
e = element
} else if (typeof element === 'string') {
e = document.querySelector(element)
}
let startX = null //开始触摸的X轴
let startY = null //开始触摸的Y轴
let startTime = null
slide()
function slide() {
e.addEventListener('touchstart', (event) => {
startX = event.changedTouches[0].clientX //开始触摸的X轴
startY = event.changedTouches[0].clientY
startTime = new Date()
})
e.addEventListener('touchend', (event) => {
const endX = event.changedTouches[0].clientX
const endY = event.changedTouches[0].clientY
const endTime = new Date()
if (endTime - this.startTime > 2000) return
let dirctive = null
if (Math.abs(endX - startX) > 10 && Math.abs(endY - startY) < 10) {
//X轴绝对值大于10,Y轴偏差小于10 两者都满足才算是滑动
// 在判断滑动的方向
endX > startX ? dirctive = 'right' : dirctive = 'left'
} else {
return
}
fn(dirctive)
})
}
}