關於監聽移動端的滑動事件,自行百度了一波,發現很少有關於這部分直接給代碼的帖子。如果不想看的直接到最下面取代碼,看好是最下面那個。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會觸發多次,這個要做下處理。
如果不足的地方,希望大神指正!!!