javascript - jQuery 手机 : Swipeleft/Swiperight is jumping itself

Question

我使用此代码对 swipeleft/swiperight 事件使用react:

$('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 pagination

我认为你的问题与多重绑定(bind)有关。

在每个绑定(bind)中放置一个 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,
        });
    }
});
});

如果这些触发不止一次，您将向您的页面附加多个绑定(bind)，当您只需要一个 每次滑动都会触发事件。

编辑:
首先，如果您使用的是最新的 Jquery，您应该使用 on/off 进行绑定(bind)，而不要再使用 live。一种方法是在 pagehide 上unbind 并在重新加载页面时重新bind。我想这将是推荐的方式。但是，如果您在滑动到下一页时没有从 DOM 中删除该页面，您将解除绑定(bind)，并且由于 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。如果不是，它会在此页面上设置绑定(bind)。下次 pageshow 触发时 bound 将为真，因此不会重新绑定(bind)。如果页面从 DOM 中移除并重新加载，bound 将不会被设置并且绑定(bind)将被重置。

我还在你的 swipeleft/swiperight 中添加了 .paginate，所以你可以使用 off

一次删除它们