jQuery Mobile:Swipeleft/Swiperight正在跳跃

Question

我使用此代码对swipeleft/swiperight事件作出反应:

$('body').live('pagecreate', function(event) {
    $('div[data-role="page"]').live("swipeleft", function() {
        var nextpage = $(this).next('div[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage);
        }
    });
    $('div[data-role="page"]').live("swiperight", function() {
        var prevpage = $(this).prev('div[data-role="page"]');
        // swipe using id of previous page if exists
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {
                reverse : true,
            });
        }
    });
});

它可以工作,但是在大约3次滑动之后(也许当我到达4页的末尾时)已经没有正常的行为了.例如:我向左滑动 - >我得到了下一页但是然后它再次向后滑动(我到达了预期的页面,但在那种情况下我不想要).这种情况发生在大约3次滑动之后.代码有什么问题？

多谢!

Answer 1

你知道JQM开发者有一个插件就是:JQM分页

我认为你的问题与多个绑定有关.

放入console.log每个绑定中以查看它发生的频率.像这样:

$('body').live('pagecreate', function(event) {
console.log( "PAGECREATE fired")
$('div[data-role="page"]').live("swipeleft", function() {
    console.log("binding to swipe-left on "+$(this).attr('id') );
    var nextpage = $(this).next('div[data-role="page"]');
    // swipe using id of next page if exists
    if (nextpage.length > 0) {
        $.mobile.changePage(nextpage);
    }
});
$('div[data-role="page"]').live("swiperight", function() {
    console.log("binding to swipe-right "+$(this).attr('id');
    var prevpage = $(this).prev('div[data-role="page"]');
    // swipe using id of previous page if exists
    if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {
            reverse : true,
        });
    }
});
});

如果这些不止一次触发,您将在页面上附加多个绑定,当您只想在每次滑动时all触发事件changePage时,这些绑定将在滑动时触发one.

编辑:
首先,如果你使用最新的Jquery你应该使用绑定on/off而不再使用live.一种方法是unbind在pagehide和重新bind当重新加载页面.我猜这是推荐的方式.然而,如果你不刷到下一个页面时从DOM删除的页面,你会解除绑定,自pagecreate不会再次触发(在DOM依然页面,无需创建),你就不会bind再当你刷卡了.

我也在处理这个问题并使用它:

$(document).on('pageshow', 'div:jqmData(role="page")', function(){

     var page = $(this), nextpage, prevpage;

     // check if the page being shown already has a binding
      if ( page.jqmData('bound') != true ){
            // if not, set blocker
            page.jqmData('bound', true)
            // bind
                .on('swipeleft.paginate', function() {
                    console.log("binding to swipe-left on "+page.attr('id') );
                    nextpage = page.next('div[data-role="page"]');
                    if (nextpage.length > 0) {
                        $.mobile.changePage(nextpage);
                        }
                    })
                .on('swiperight.paginate', function(){
                    console.log("binding to swipe-right "+page.attr('id');
                    prevpage = page.prev('div[data-role="page"]');
                    if (prevpage.length > 0) {
                        $.mobile.changePage(prevpage, {
                            reverse : true,
                            });
                        };
                     });
            }
        });

这将触发每一个pageshow并检查页面是否bound.如果没有,它会在此页面上设置绑定.下次pageshow火灾bound将是真的,所以它不会重新绑定.如果页面从DOM中删除并重新加载,bound则不会设置并且绑定将被重置.

我还添加.paginate了你的swipeleft/swiperight,所以你可以一次性删除它们off