Question

我正在尝试移动到下一个和上一个部分，我的代码工作正常，有两个部分如何处理多个部分？

这是我的代码

HTML： -

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>Page 1</h1>
    </div>

    <div data-role="content">
        <p class="table">Some text goes here</p>
    </div>

    <div data-role="footer">
        <h4>footer1</h4>
    </div>
</div>

<div data-role="page" id="page2">

    <div data-role="header">
        <h1>Page 2</h1>
    </div>

    <div data-role="content">
        <p class="table">Thank you</p>
    </div>

    <div data-role="footer">
        <h4>Footer2</h4>
    </div>
</div>

<div data-role="page" id="page3">

    <div data-role="header">
        <h1>Page 3</h1>
    </div>

    <div data-role="content">
        <p class="table">Hello </p>
    </div>

    <div data-role="footer">
        <h4>Footer3</h4>
    </div>
</div>

<div data-role="page" id="page4">

    <div data-role="header">
        <h1>Page 4</h1>
    </div>

    <div data-role="content">
        <p class="table">gjkgjkgjkgjkgjk</p>
    </div>

    <div data-role="footer">
        <h4>Footer4</h4>
    </div>
</div>

Jquery： -

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


$(document).on('swipedown',function(){ $.mobile.changePage("#page2"); 
               });
$(document).on('swipeup',function(){ $.mobile.changePage("#page1"); 
               });

所以我对此问题感到不安请帮助我。

Answer 1

您可以通过两种方式进行管理：

<强>首先：保留页码JSFiddle

window.currentPage=1;

$(document).on('swipedown',function(event){ 
     window.currentPage--;
    $.mobile.changePage("#page" +window.currentPage);                                                
});
$(document).on('swipeup',function(){
     window.currentPage++;
      $.mobile.changePage("#page" +window.currentPage); 
});

第二：获取上一个/下一个活动页面JSFiddle

 $(document).on('swipedown',function(event){ 
         if ($.mobile.activePage.prev("[data-role=page]").length !== 0) {
            var prev = $.mobile.activePage.prev("[data-role=page]");
            $.mobile.changePage(prev, {
                transition: 'slidedown',
                reverse: true
            });
        } 
    });
 $(document).on('swipeup',function(){
        if ($.mobile.activePage.next("[data-role=page]").length !== 0) {
            var next = $.mobile.activePage.next("[data-role=page]");
            $.mobile.changePage(next, {
                transition: 'slideup'
            });
        }
    });

如何使用向上滑动移动下一页和上一页？

1 个答案: