vue 多点触控手势_Vue项目中添加手势实现左滑右滑操作

Vue项目中添加手势实现左滑右滑操作

左滑右滑等手势可通过监听touchstart和touchmove事件实现

touchstart 记录起始坐标

touchmove 计算当前位置

加上绝对值判断更加精确。

右滑关闭

data() {

return {

startX: 0,

startY: 0

}

},

mounted() {

document.getElementById('rightSwip').addEventListener('touchstart', function(e) {

// console.log('touchstart:', e)

e.preventDefault()

this.startX = e.changedTouches[0].pageX

this.startY = e.changedTouches[0].pageY

})

document.getElementById('rightSwip').addEventListener('touchmove', function(e) {

// console.log('touchmove:', e)

e.preventDefault()

if (e.changedTouches.length) {

let moveEndX = e.changedTouches[0].pageX

let moveEndY = e.changedT