最近公司開發(fā)手機(jī)網(wǎng)站，本人主要負(fù)責(zé)前端這塊的工作，考慮到j(luò)query腳本庫(kù)體質(zhì)大的問(wèn)題，選擇用Zepto腳本框架，對(duì)于手機(jī)網(wǎng)站，滑動(dòng)屏幕事件是頻繁用到的，所以經(jīng)過(guò)一小段時(shí)間的研究，本人做了一個(gè)基于Zepto.js的插件，主要是對(duì)手機(jī)網(wǎng)站 上劃，下滑，左劃，右滑事件的封裝。具體代碼如下：
(function($) {
$.fn.touchwipe = function(settings) {
var config = {
min_move_x: 50,
min_move_y: 20,
wipeLeft: function() { },
wipeRight: function() { },
wipeUp: function() { },
wipeDown: function() { },
preventDefaultEvents: false
};
if (settings) $.extend(config, settings);
this.each(function() {
var startX;
var startY;
var isMoving = false;
var directionLocked = null;
function cancelTouch() {
this.removeEventListener('touchmove', onTouchMove);
startX = null;
isMoving = false;
directionLocked = false;
}
function onTouchMove(e) {
if(config.preventDefaultEvents) {
e.preventDefault();
}
if(isMoving) {
var x = e.changedTouches ? e.changedTouches[0].clientX: e.clientX;
var y = e.changedTouches ? e.changedTouches[0].clientY: e.clientY;
var dx = startX - x;
var dy = startY - y;
var absDistX = Math.abs(dx);
var absDistY = Math.abs(dy);
if (directionLocked === "y") {
return
} else {
if (directionLocked === "x") {
e.preventDefault()
} else {
absDistX = Math.abs(dx);
absDistY = Math.abs(dy);
if (absDistX < 4) {
return
}
if (absDistY > absDistX ) {
dx = 0;
directionLocked = "y";
return
} else {
e.preventDefault();
directionLocked = "x"
}
}
}
if(absDistX >= config.min_move_x) {
cancelTouch();
if(dx > 0) {
config.wipeLeft();
}
else {
config.wipeRight();
}
}
}
}
function onTouchStart(e)
{
if (e.touches.length == 1) {
startX = e.changedTouches ? e.changedTouches[0].clientX: e.clientX;
startY = e.changedTouches ? e.changedTouches[0].clientY: e.clientY;
isMoving = true;
directionLocked = false;
this.addEventListener('touchmove', onTouchMove, false);
}
}
if ('ontouchstart' in document.documentElement) {
this.addEventListener('touchstart', onTouchStart, false);
}
});
return this;
};
})(Zepto);