如果结果不如你所愿，就在尘埃落定前奋力一搏
前言
1 介绍
常用手势
Tap
// 单击 双击 长按
hammer.on('tap doubletap press', evt => {
console.log(evt.type, evt)
})
Pan
// 拖拽
// 垂直方向须手动添加
hammer.on('pan panleft panright panup pandown panend', evt => {
console.log(evt.type, evt)
})
Swipe
// 滑动
// 垂直方向须手动添加
hammer.on('swipe swipeleft swiperight swipeup swipedown', evt => {
console.log(evt.type, evt)
})
Rotate
// 旋转
// 旋转须手动添加
hammer.on('rotate', evt => {
console.log(evt.type, evt)
})
Pinch
// 缩放
// 缩放须手动添加
hammer.on('pinch', evt => {
console.log(evt.type, evt)
})
常用方法
get
// 获取事件
hammer.get('press')
hammer.get('swipe')
hammer.get('pinch')
set
// 设置事件
hammer.get('press').set({time: 500})
hammer.get('swipe').set({direction: Hammer.DIRECTION_VERTICAL})
hammer.get('pinch').set({enable: true})
常用配置项
enable
// 支持与否
enable: true
time
// 时长
time: 500
direction
// 方向
/*
Hammer.DIRECTION_NONE
Hammer.DIRECTION_LEFT
Hammer.DIRECTION_RIGHT
Hammer.DIRECTION_HORIZONTAL
Hammer.DIRECTION_UP
Hammer.DIRECTION_DOWN
Hammer.DIRECTION_VERTICAL
Hammer.DIRECTION_ALL
*/
direction: Hammer.DIRECTION_VERTICAL
事件对象
type
// 类型
evt.type
deltaTime
// 时长
evt.deltaTime
deltaX
// 水平位移
evt.deltaX
deltaY
// 垂直位移
evt.deltaY
distance
// 移动距离
evt.distance
angle
// 偏移角度
evt.angle
2 使用
安装
npm install hammerjs -S
.vue
<template>
<div class="Hammer">
<div class="box" ref="box"></div>
</div>
</template>
<script>
import Hammer from 'hammerjs'
export default {
data() {
return {
hammer: null
}
},
mounted() {
this.init()
},
methods: {
init() {
// 默认事件
// tap doubletap press
// pan panleft panright panup pandown panend
// swipe swipeleft swiperight
// 手动添加
// swipeup swipedown
// panup pandown
// 特殊事件，避免卡死
// pinch rotate
this.hammer = new Hammer(this.$refs.box)
// 需识别事件
this.hammer.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL })
this.hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL })
// 需特殊处理事件
this.hammer.get('pinch').set({ enable: true })
this.hammer.get('rotate').set({ enable: true })
// this.hammer.on(
// `tap doubletap press
// pan panleft panright panup pandown panend
// swipe swipeleft swiperight swipeup swipedown
// pinch pinchend
// `,
// evt => {
// console.log(evt.type, evt)
// }
// )
// }
this.hammer.on('pan', evt => {
// deltaTime
// deltaX deltaY distance
// angle
console.log(evt.type, evt)
})
}
}
}
</script>
<style lang="scss" scoped>
.Hammer {
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 500px;
border: 1px solid #ccc;
.box {
width: 200px;
height: 200px;
background: brown;
}
}
</style>
3.注意
1.事件无法使用时，需要手动添加识别
2.使用manager管理，pan和swipe冲突
尾声
希望是个好东西，也许是世界上做好的东西
晚安 ^_^
