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页的末尾）时，已经没有正常的行为了。例如：我向左滑动 - ＆gt;我得到了下一页，但随后它再次向后滑动（我到达了预期的页面但不是我想要的那种情况）。这种情况发生在大约3次滑动之后。代码有什么问题？

很多！

Answer 1

你知道JQM devs中有一个插件就是为了这个插件：JQM pagination

我认为您的问题与多个绑定有关。

在每个绑定中放置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中，无需创建），因此您不会{{当你向后滑动时再次1}}

我也在处理这个问题并且正在使用它：

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将成立，因此它不会重新绑定。如果页面已从DOM中删除并重新加载，则不会设置bound并重置绑定。

我还在您的swipeleft / swiperight中添加了bound，因此您可以使用.paginate
一次删除所有内容

jQuery Mobile：Swipeleft / Swiperight正在跳跃

1 个答案: