// Use class to get element by string.
var swiper = new Swipe('#my-element');
swiper.onLeft(function() { alert('You swiped left.') });
swiper.run();
// Get the element yourself.
var swiper = new Swipe(document.getElementById('#my-element'));
swiper.onLeft(function() { alert('You swiped left.') });
swiper.run();
// One-liner.
(new Swipe('#my-element')).onLeft(function() { alert('You swiped left.') }).run();
16 回答
简单的vanilla JS代码示例:
在Android中测试过 .
我发现这个jquery touchwipe插件适用于我的第一代ipod touch和我的droid令人难以置信 . http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
根据@ givanse的回答,这就是你如何用_2685309做到的:
你可以像这样使用它:
你试过hammer.js吗? http://eightmedia.github.com/hammer.js/也适用于Windows手机..
之前我用过的是你必须检测mousedown事件,记录它的x,y位置(以相关者为准)然后检测mouseup事件,然后减去这两个值 .
jQuery Mobile还包括滑动支持:http://api.jquerymobile.com/swipe/
例
我发现@givanse很棒的答案是在多个移动浏览器中最可靠和最兼容的注册滑动操作 .
但是,在使用
jQuery
的现代移动浏览器中使其工作所需的代码发生了变化 .如果使用
jQuery
,event.touches
将不存在,结果为undefined
,应由event.originalEvent.touches
替换 . 没有jQuery
,event.touches
应该可以正常工作 .所以解决方案变成,
测试:
Android :Chrome,UC浏览器
iOS :Safari,Chrome,UC浏览器
我将TouchWipe重新打包为一个简短的jquery插件:detectSwipe
我将这里的一些答案合并到一个脚本中,该脚本使用CustomEvent来触发DOM中的滑动事件 . 将0.7k swiped-events.min.js脚本添加到您的页面并监听 swiped 事件:
向左滑动
向右滑动
刷了起来
刷了下来
您还可以直接附加到元素:
可选配置
您可以指定以下属性来调整页面中滑动交互功能的方式(这些是可选的) .
源代码可在Github获取
一些最新的答案(无法评论......)来处理短暂的滑动
trashold,超时滑动,swipeBlockElems添加 .
如果有人试图在Android上使用jQuery Mobile并且在JQM滑动检测方面存在问题
(我有一些关于Xperia Z1,Galaxy S3,Nexus 4和一些Wiko手机)这可能很有用:
除非是非常长,精确和快速的滑动,否则未检测到在Android上滑动 .
使用这两行它可以正常工作
当用户拖动手指时,我遇到了touchend处理程序不断触发的问题 . 我不知道这是不是因为我做错了或者没有做错,但是我重写了这个用touchmove积累动作,而touchend实际上是在触发回调 .
我还需要有大量的这些实例,所以我添加了启用/禁用方法 .
并且短暂滑动不会触发的阈值 . 每次Touchstart零都是计数器 .
您可以动态更改target_node . 创建时启用是可选的 .
使用二:
jQuery mobile: 在大多数情况下工作,特别是在开发使用其他jQuery插件的应用程序时,最好使用jQuery移动控件 . 在这里访问:https://www.w3schools.com/jquerymobile/jquerymobile_events_touch.asp
Hammer Time ! 最好,轻量级和快速的基于JavaScript的库之一 . 在这里访问:https://hammerjs.github.io/
如果你只是需要滑动,只需使用你需要的部分就可以更好地放大尺寸 . 这适用于任何触摸设备 .
在gzip压缩,缩小,babel等之后,这是~450个字节 .
我根据其他答案编写了下面的类,它使用百分比移动而不是像素,并使用事件调度程序模式来挂钩/取消挂钩 .
像这样使用它:
如何使用偏移量的示例 .