在vue web移动端中使用滑动事件

滑动事件

touchstart 手指开始滑动的位置
touchmove 手指滑动的位置
touchend 手指离开的位置

监听滑动事件

<div @touchstart='touchstart' @touchmove='touchmove'>
</div>

   touchstart (e) {
	// 如果你要阻止点击事件，请反注释下一行代码
    // e.preventDefault()
     this.startX = e.touches[0].clientX
     this.startY = e.touches[0].clientY
   },
   touchmove (e) {
     // e.preventDefault()
     this.moveX = e.touches[0].clientX
     this.moveY = e.touches[0].clientY
     this.startX - this.moveX <= 0 ? console.log('你在往右滑') : console.log('你在往左滑')
     if (this.startX - this.moveX <= -100) { // 右滑触发
		// do something
	}
   }

this.startX - this.moveX 可以简单的判断往左还是往右滑动。
你还可以设置一下灵敏度，它们的差值在100时才触发。

总结

touchstart和touchmove的数据在touches数组里
touchend的数据在changedtouches数组里
要阻止页面的其他点击事件可以加上e.preventDefault()