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");
      }
}
Logo

前往低代码交流专区

更多推荐