Hammerjs 未检测到滑动动作

Question

我正在使用带有 Nuxt 的Hammerjs 2.0.8 ，但我似乎无法让它检测到滑动动作。 这是我完成设置的方式。 如果我将识别器更改为[Hammer.Pan, { direction: Hammer.DIRECTION_HORIZONTAL }]并在 pan 事件上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()在 UI 上创建元素

在这里试试这个：

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