Vue移动端手势事件

整理移动的手势事件，注册成vue的指令

包含指令

 指令 事件名称    描述
 v-tap  点击事件
 v-swipe    滑动事件
 v-swipeleft    左滑事件
 v-swiperight   右滑事件
 v-swipedown    下滑事件
 v-swipeup  上滑事件
 v-longtap  长按事件

代码使用

main.js 引入

import './utils/Touch'

需要使用的地方

<template>
   <div>
     <!--使用方式如下-->
     <div v-swipeup="nextPage"
          v-swipedown="prevPage"></div>
   </div>
</template>
<script>
export default {
  methods: {
    // 前一页
    prevPage () {
      this.page--
    },
    // 后一页
    nextPage () {
      this.page++
    }
  }
}
</script>

核心代码

有点过度封装了，暂时这样后续精简和补充双指缩放等其他功能

  import Vue from 'vue'
  import TouchCls from './touch-cls'

 * 点击事件

Vue.directive('tap', {
  bind: function (el, binding) {
    const touch = new TouchCls(el, binding, 'tap')
    touch.initialize()
  }
})
 * 长按事件
  Vue.directive('swipe', {
  bind: function (el, binding) {
    const touch = new TouchCls(el, binding, 'swipe')
    touch.initialize()
  }
})
 * 左滑
Vue.directive('swipeleft', {
  bind: function (el, binding) {
    const touch = new TouchCls(el, binding, 'swipeleft')
    touch.initialize()
  }
})
 * 右滑
Vue.directive('swiperight', {
  bind: function (el, binding) {
    const touch = new TouchCls(el, binding, 'swiperight')
    touch.initialize()
  }
})
 * 下滑
Vue.directive('swipedown', {
  bind: function (el, binding) {
    const touch = new TouchCls(el, binding, 'swipedown')
    touch.initialize()
  }
})
 * 上滑
Vue.directive('swipeup', {
  bind: function (el, binding) {
    const touch = new TouchCls(el, binding, 'swipeup')
    touch.initialize()
  }
})
 * 长按事件
Vue.directive('longtap', {
  bind: function (el, binding) {
    const touch = new TouchCls(el, binding, 'longtap')
    touch.initialize()
  }
})

类文件

export default class VueTouch {
  constructor (el, binding, type) {
    this.obj = el
    this.binding = binding
    this.touchType = type
    this.vueTouches = {
      x: 0,
      y: 0
    }
    this.vueMoves = true
    this.vueLeave = true
    this.longTouch = true
    this.vueCallBack = typeof (binding.value) === 'object' ? binding.value.fn : binding.value
  }

  initialize () {
    const _this = this
    this.obj.addEventListener('touchstart', function (e) {
      _this.start(e)
    }, false)
    this.obj.addEventListener('touchend', function (e) {
  _this.end(e)
    }, false)
    this.obj.addEventListener('touchmove', function (e) {
      _this.move(e)
    }, false)
  }

  start (e) {
    this.vueMoves = true
    this.vueLeave = true
    this.longTouch = true
    this.vueTouches = {
      x: e.changedTouches[0].pageX,
      y: e.changedTouches[0].pageY
    }
    this.time = setTimeout(function () {
      if (this.vueLeave && this.vueMoves) {
        this.touchType === 'longtap' && this.vueCallBack(this.binding.value, e)
        this.longTouch = false
      };
    }.bind(this), 1000)
  }
  end (e) {
    var disX = e.changedTouches[0].pageX - this.vueTouches.x
    var disY = e.changedTouches[0].pageY - this.vueTouches.y
    clearTimeout(this.time)
    if (Math.abs(disX) > 10 || Math.abs(disY) > 100) {
      this.touchType === 'swipe' && this.vueCallBack(this.binding.value, e)
      if (Math.abs(disX) > Math.abs(disY)) {
        if (disX > 10) {
          this.touchType === 'swiperight' && this.vueCallBack(this.binding.value, e)
        };
        if (disX < -10) {
          this.touchType === 'swipeleft' && this.vueCallBack(this.binding.value, e)
        };
      } else {
        if (disY > 10) {
      this.touchType === 'swipedown' && this.vueCallBack(this.binding.value, e)
      };
        if (disY < -10) {
        this.touchType === 'swipeup' && this.vueCallBack(this.binding.value, e)
      };
    };
  } else {
    if (this.longTouch && this.vueMoves) {
      this.touchType === 'tap' && this.vueCallBack(this.binding.value, e)
      this.vueLeave = false
    };
  };
}
move (e) {
  this.vueMoves = false
}
}

// 作者:gaochengxin，
//采纳请点赞谢谢！