If things don’t turn out the way you wanted, give it a go before the dust settles

preface

1 introduction

Commonly used gestures

Tap

// Double-click hammer.on('tap doubletap press', evt => {console.log(evt.type, evt)})Copy the code

Pan

Hammer. On ('pan panleft panright panup pandown panend', evt => {console.log(evt.type, evt)})Copy the code

Swipe

Hammer. On ('swipe swipeleft swiperight swipeup swipedown', evt => {console.log(evt.type, evt)})Copy the code

Rotate

On ('rotate', evt => {console.log(evt.type, evt)})Copy the code

Pinch

Hammer. On ('pinch', evt => {console.log(evt.type, evt)})Copy the code

Commonly used method

get

Hammer. Get ('press') hammer. Get ('swipe') hammer. Get ('pinch')Copy the code

set

Hammer. Get ('press'). Set ({time: 500}) hammer. Get ('swipe'). Set ({direction: Hammer.DIRECTION_VERTICAL}) hammer.get('pinch').set({enable: true})Copy the code

Common Configuration Items

enable

// Enable: trueCopy the code

time

// Time: 500Copy the code

direction

// 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_VERTICALCopy the code

The event object

type

/ / type evt. TypeCopy the code

deltaTime

/ / the length evt. DeltaTimeCopy the code

deltaX

// Horizontal displacement evt.deltaxCopy the code

deltaY

// Vertical displacement evt.deltayCopy the code

distance

// Move the distance evt.distanceCopy the code

angle

// Offset Angle evt.angleCopy the code

2 use

The installation

npm install hammerjs -S
Copy the code

.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() {// Default event // tap doubletap press // pan panleft panright panup pandown panend // Swipe swipeleft swiperight // Manually add // swipeup swipedown // panUP pandown // Special events, 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}) // Special handling event 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>Copy the code

3. Pay attention to

1. If an event is unavailable, manually add event recognition. 2

The end of the

Hope is a good thing, maybe the best thing in the world

Good night ^_^

Refer to the link

  • Hammerjs document
  • Hammerjs Chinese documentation

Review past

  • Learn a Vue plugin (1) every day — Better scroll
  • Learn a VUE plugin (2) every day — vue-awesome-swiper
  • Learn a vUE plugin every day (3) — esLint + prettier + stylelint
  • Learn a VUE plugin (4) every day — the V-Viewer
  • Learn a vUE plugin (5) every day — PostCSs-pxtorem
  • Learn a Vue plugin every day (6) — Momentjs