如何自上而下滑动 JQuery 移动版 [英] How to swipe top down JQuery mobile

问题描述

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

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

我有这个卷，如图所示:

i have this roll as image shows:

我可以使用箭头图标 (onClick()) 处理事件，但我想添加向下滑动事件，添加滑动事件时，它适用于左右我希望它在图像显示时向下有什么帮助吗?

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?

推荐答案

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

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:

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

})();

这里是 的答案黑色发电机

这篇关于如何自上而下滑动 JQuery 移动版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！