關於使用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會觸發多次,這個要做下處理。
如果不足的地方,希望大神指正!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章