如何自上而下滑动 JQuery 移动版

IT技术 javascript jquery css html jquery-mobile
2021-03-06 13:03:16

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

如图所示,我有这个卷: 如何使滑动自上而下

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

2个回答

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

})();

这是Blackdynamo的答案

如果滑动的开始和目标不是同一个 div,则此答案不起作用:请参阅下面的答案以进行修复!小提琴:jsfiddle.net/Q3d9H/124
2021-04-21 13:03:16
@SantoshGhimire,您可以使用$('mySelector').on('swipeup', function() {});$('mySelector').on('swipedown', function() {});
2021-04-26 13:03:16
我只是想补充。答案仍然完美。我将此脚本添加到头部,并使用了“$('.myClassSelector').on('swipedown', function() {});”。第一次尝试。谢谢。
2021-04-30 13:03:16
我使用了这个 jQuery 插件,它是最简单的。github.com/mattbryson/TouchSwipe-Jquery-Plugin
2021-05-05 13:03:16
如何为 swipeupdown 事件设置侦听器并为 swipeup 和 swipedown 事件执行不同的任务?
2021-05-08 13:03:16

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

这可能是一个更简单的答案,我直接覆盖 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 );
“接受的答案完美无缺”,这个社区中有 50 人投票赞成
2021-04-24 13:03:16
尝试从底部 div 滑动到顶部 div,不起作用:jsfiddle.net/Q3d9H/124我的解决方案可以处理(小提琴很复杂,因为我扩展了 jquery 脚本)
2021-05-14 13:03:16
在你说之前,这是想要的行为,不,不是。Jquery swipeleft 和 swiperight 还可以正确处理不同的开始和目标 div。所以我的新解决方案是真正正确的解决方案,没有任何错误。尽管您链接中的简单示例运行良好,但它无法处理可能和常见的用例。最好的祝福
2021-05-14 13:03:16