整理移动的手势事件，注册成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
}
}
