H5中判断手势左滑右滑

vue-touch-events实现H5判断屏幕左右滑动

概述：

在H5项目中，涉及到手势交互，需要判断屏幕左滑右滑，最开始使用了原生的touchstart和touchend方法，根据手势起始点的距离以及形成的角度来判断用户左右滑动，但是存在了较大的误差，对于安卓手机和iOS上，分辨率的大小，也存在灵敏度的问题，使用户交互体验一直不太好，后来发现在了vue-touch-events这个插件,可以很轻松的判断用户左右滑动。

使用

安装

npm install --save vue2-touch-events --save

在项目中引用（main.js)：

import Vue2TouchEvents from 'vue2-touch-events'

Vue.use(Vue2TouchEvents)

组件中应用：

<div
    class="flow-container"
    v-touch:swipe="swipeHandler"
  >
</div>
//方法
swipeHandler (direction) {
      if(direction == "left"){
        this.$emit("moveDirection", "left");
      } else if(direction == "right"){
        this.$emit("moveDirection", "right");
      }
}