2

i use this code to react on the swipeleft/swiperight event:

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

It works, but after about 3 swipes (maybe when i reach the end of the 4 pages) there´s no normal behaviour anymore. For example: I swipe left --> i get the nextpage but then it swipes back and then again (i reach the expected page but not in that case i want). That happens after about 3 swipes all the time. What´s wrong with the code?

Thx a lot!

4

1 回答 1

5

你知道有一个来自 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,
                            });
                        };
                     });
            }
        });

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

我还添加.paginate到您的 swipeleft/swiperight 中，这样您就可以使用off

于 2012-08-30T08:31:11.353 回答