关于使用js监听移动端的滑动事件

关于监听移动端的滑动事件,自行百度了一波,发现很少有关于这部分直接给代码的帖子。如果不想看的直接到最下面取代码,看好是最下面那个。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会触发多次,这个要做下处理。
如果不足的地方,希望大神指正!!!

猜你喜欢

转载自blog.csdn.net/weixin_42158320/article/details/83419355