[英]How to swipe top down JQuery mobile
我試圖上下左右而不是左右滑動
我有這個卷,如圖所示:
我可以使用箭頭圖標處理事件(onClick()),但我想添加向上滑動事件,當添加滑動事件時,它在左側工作我希望它向下,因為圖像顯示任何幫助?
jQuery Mobile本身為我們提供了捕獲swipeleft和swiperight的能力。 然而,它並沒有為我們提供swipeup和swipeown開箱即用。 通過調整jQuery團隊為swipeleft和swiperight所做的工作,我們能夠以相同的方式創建和捕獲這些事件。 請參閱以下代碼以實現swipeup和swipeown:
(function() {
var supportTouch = $.support.touch,
scrollEvent = "touchmove scroll",
touchStartEvent = supportTouch ? "touchstart" : "mousedown",
touchStopEvent = supportTouch ? "touchend" : "mouseup",
touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
$.event.special.swipeupdown = {
setup: function() {
var thisObject = this;
var $this = $(thisObject);
$this.bind(touchStartEvent, function(event) {
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] :
event,
start = {
time: (new Date).getTime(),
coords: [ data.pageX, data.pageY ],
origin: $(event.target)
},
stop;
function moveHandler(event) {
if (!start) {
return;
}
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] :
event;
stop = {
time: (new Date).getTime(),
coords: [ data.pageX, data.pageY ]
};
// prevent scrolling
if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
event.preventDefault();
}
}
$this
.bind(touchMoveEvent, moveHandler)
.one(touchStopEvent, function(event) {
$this.unbind(touchMoveEvent, moveHandler);
if (start && stop) {
if (stop.time - start.time < 1000 &&
Math.abs(start.coords[1] - stop.coords[1]) > 30 &&
Math.abs(start.coords[0] - stop.coords[0]) < 75) {
start.origin
.trigger("swipeupdown")
.trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown");
}
}
start = stop = undefined;
});
});
}
};
$.each({
swipedown: "swipeupdown",
swipeup: "swipeupdown"
}, function(event, sourceEvent){
$.event.special[event] = {
setup: function(){
$(this).bind(sourceEvent, $.noop);
}
};
});
})();
這是Blackdynamo的答案
我在這里遇到了接受答案的問題,因為當滑動的原點和目標不相同時,未檢測到滑動。
這里可能是一個更簡單的答案,我直接覆蓋jquery handleSwipe事件(基於jquery.mobile-1.4.5)並附加一個垂直滑動,上下調用:
(function( $, window, undefined ) {
//custom handleSwipe with swiperight, swipeleft, swipeup, swipedown
$.event.special.swipe.handleSwipe = function( start, stop, thisObject, origTarget ) {
if ( stop.time - start.time < $.event.special.swipe.durationThreshold ) {
var horSwipe = Math.abs( start.coords[0] - stop.coords[0] ) > $.event.special.swipe.horizontalDistanceThreshold;
var verSwipe = Math.abs( start.coords[1] - stop.coords[1] ) > $.event.special.swipe.verticalDistanceThreshold;
if( horSwipe != verSwipe ) {
var direction;
if(horSwipe)
direction = start.coords[0] > stop.coords[0] ? "swipeleft" : "swiperight";
else
direction = start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown";
$.event.trigger($.Event( "swipe", { target: origTarget, swipestart: start, swipestop: stop }), undefined, thisObject);
$.event.trigger($.Event( direction, { target: origTarget, swipestart: start, swipestop: stop }), undefined, thisObject);
return true;
}
return false;
}
return false;
}
//do binding
$.each({
swipeup: "swipe.up",
swipedown: "swipe.down"
}, function( event, sourceEvent ) {
$.event.special[ event ] = {
setup: function() {
$( this ).bind( sourceEvent, $.noop );
},
teardown: function() {
$( this ).unbind( sourceEvent );
}
};
});
})( jQuery, this );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.