在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()

参考地址：blog.csdn.net/xzwwjl1314/…