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)

组件中应用：

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

H5中判断手势左滑右滑相关推荐

H5中判断手势滑动方向
touchstart.touchend事件判断手势滑动方向 //data中进行定义 startX:null, startY:null,//mounted生命周期中进行监听 document.addEv ...
uni-app、H5+ 仿IOS 实现安卓手势拖拽右滑关闭当前页面并返回上级页面 + 阴影效果（侧滑返回）
背景在我们日常开发中,经常会效仿某些流行APP渲染动画效果,用来满足自己开发或公司开发的日常需要,学习一下新的东西还是好的,本案例是仿IOS 手势拖拽右滑关闭当前页面并返回主页的一个案例预览效 ...
360极速浏览器谷歌浏览器关闭双指左滑右滑页面前进后退手势
经常使用Mac的触控板,浏览器会有默认的双指左滑右滑页面前进后退手势,有时正在编辑文档,一个失误手势导致编辑的内容丢失. Mac terminal 中输入 360浏览器关闭 defaults wri ...
ionic4 hammerjs手势事件左滑右滑
ionic4 hammerjs手势事件左滑右滑首先需要安装hammerjs ,在项目目录下执行: npm install hammerjs --save ts: import 'hammerjs'; ...
微信小程序界面从右边滑出_微信小程序--左滑右滑的乐趣
左滑右滑你不再是一个人无论你是一个程序猿还是一个程序媛,每天干的事除了coding还是coding,代码不能解决的问题(什么问题自己心里还没点abcd数嘛),探探能帮你解决.最近网上特流行一款交 ...
android 左滑右滑,Android仿滴答清单左滑右滑效果
直接上效果图记录仿写滴答清单App 过程中的技术点本文分为以下章节,读者可按需阅读: 1.自定义RecycleItemTouchHelper 2.实现滴答清单左滑右滑效果 3.RecycleVie ...
Android直播软件搭建左滑右滑清屏控件
Android直播软件搭建左滑右滑清屏控件最近在迭代直播软件搭建功能时,项目中之前的左滑清屏是用ViewPager实现的.这次迭代遇到一个布局层次导致的点击失效问题,继续用ViewPager的话改动 ...
探探左滑右滑简单实现
简单实现探探左滑右滑效果演示首先上网下载一个library文件夹接 ...
仿探探：网络请求数据将卡片进行左滑右滑
MVP+Retrofit+RxJava进行网络数据的请求,Fresco进行图片的显示实现探探的左滑右滑效果. 先看一下效果再看一下依赖 implementation project(':librar ...

H5中判断手势左滑右滑

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

H5中判断手势左滑右滑相关推荐

最新文章

热门文章