Estoy usando Hammerjs 2.0.8 con Nuxt, y parece que no puedo hacer que detecte el movimiento de deslizamiento. Así es como he hecho la configuración. Si cambio el reconocedor a [Hammer.Pan, { direction: Hammer.DIRECTION_HORIZONTAL }] y en el evento pan hammer.on('pan', this.handleTouchEvents) ; ejecuta el método this.handleTouchEvents .
<template> <v-app> <v-main> <v-container id="touch-container" fluid> <div class="items"> ... </div> </v-container> </v-main> </v-app> </template> <script> export default { mounted () { const Hammer = require('hammerjs') const touchContainer = document.getElementById('touch-container') const hammer = new Hammer.Manager(touchContainer, { recognizers: [ [Hammer.Swipe, { direction: Hammer.DIRECTION_HORIZONTAL }] ] }) hammer.on('swipe', this.handleTouchEvents) }, methods: { handleTouchEvents (e) { alert(e.type) } } } </script> <style scoped> #touch-container { height: 100%; min-width: 100%; overflow-x: hidden; } #items { touch-action: pan-y; } </style>¿Alguna idea de cómo resolver este problema?
touchContainer probablemente no esté definido.
2 cosas:
process.clientthis.$nextTick()Aquí prueba esto:
async mounted () { if(process.client) { await this.$nextTick(); const Hammer = require('hammerjs') const touchContainer = document.getElementById('touch-container') const hammer = new Hammer.Manager(touchContainer, { recognizers: [ [Hammer.Swipe, { direction: Hammer.DIRECTION_HORIZONTAL }] ] }) hammer.on('swipe', this.handleTouchEvents) } },