Hammerjs没有检测到滑动运动

Question

我使用nuxt使用 Hammerjs 2.0.8 ，我似乎无法使其检测到滑动运动。这是我完成设置的方式。如果我将识别器更改为[Hammer.pan，{Direction：Hammer.direction_horizo​​ntal}]和on Pan Event Hammer.on（'Pan'，this.handletouchevents）;它运行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>

知道如何解决这个问题吗？

Answer 1

TouchContainer可能是未定义的。

2件事：

1. 检查其是否在客户端使用process.client
2. 等待，直到Vue使用this。$ nexttick（）

在此处尝试以下操作：

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