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

滑动事件

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

code

<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时才触发