如何自上而下滑动 JQuery mobile

How to swipe top down JQuery mobile

提问by Muath

I'm trying to make event on swiping up and down instead of left and right

我正在尝试向上和向下滑动而不是向左和向右滑动

i have this roll as image shows:

我有这个卷，如图所示：

I can handle the event using arrow icon (onClick()) but i want to add swipe up down event, when adding swipe event it works on left right I want it up down as image displays any help?

我可以使用箭头图标 (onClick()) 处理该事件，但我想添加向上滑动事件，添加滑动事件时它在左侧工作，我希望它向下滑动，因为图像显示有什么帮助吗？

回答by Taymoor Q.

jQuery Mobile natively provides us with the ability to capture the swipeleft and swiperight. It does not however offer us swipeup and swipedown out of the box. Adapting what the jQuery team has done for swipeleft and swiperight, we are able to create and capture those events in the same manner. See the following code to implement swipeup and swipedown:

jQuery Mobile 为我们提供了捕获向左滑动和向右滑动的能力。然而，它并没有为我们提供开箱即用的向上滑动和向下滑动。调整 jQuery 团队为 swipeleft 和 swiperight 所做的工作，我们能够以相同的方式创建和捕获这些事件。见下面代码实现swipeup和swipedown：

(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);
            }
        };
    });

})();

and here is the answer from Blackdynamo

这是来自Blackdynamo的答案

回答by kaiser

I had Problems with the accepted answer here, because swiping wasn't detected when origin and target of the swipe were not the same.

我在这里接受的答案有问题，因为当滑动的起点和目标不同时，没有检测到滑动。

Here maybe an easier answer, where i directly override the jquery handleSwipe event (based on jquery.mobile-1.4.5) and append it with a vertical swipe, called up and down:

这可能是一个更简单的答案，我直接覆盖 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 );