Vue移动端手势事件封装

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

包含指令

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

代码使用

1. main.js 引入

import './utils/Touch'

2. 需要使用的地方

<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
  }
}

饮水思源

• vue自定义移动端touch事件，点击、滑动、长按事件
• 后续补充