关于监听移动端的滑动事件,自行百度了一波,发现很少有关于这部分直接给代码的帖子。如果不想看的直接到最下面取代码,看好是最下面那个。zepto中有一些写好的监听事件,可以拿来直接用,比如touchstart,touchend,swipeUp,swipeDown,等等,但是如果你直接使用会发现一些不足的地方。
比如你这么使用:
必须要先引入zepto.js,否则会报错!
//这是不完善的代码!!!
var black = $('.m-test');
black.on('swipeDown', function(event) {
//监听到下滑
})
black.on('swipeUp', function(event) {
//监听到上滑
})
这个时候你开开心心的去移动端测试的时候你会发现,你上滑,下滑,都是不灵敏的,也就是说,有的时候你上滑2,3,或者多次,只会触发一次。这样的话,移动端的体验就非常的差。
怎么办呢?你可以试试下面的代码!!!
//比较完善的代码
var black = $('.m-test');
black.on('touchstart', function(event) {
event.preventDefault();
black.on('swipeDown', function(event) {
event.preventDefault();
//监听到下滑操作
})
black.on('swipeUp', function(event) {
event.preventDefault();
//监听到上滑操作
})
})
有个问题需要说一下,这个时候代码监听上滑和下滑是非常的灵敏,但是swipeUp和swipeDown会触发多次,这个要做下处理。
如果不足的地方,希望大神指正!!!