2

このコードを使用して、swipeleft/swiperright イベントに反応します。

$('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回スワイプした後に発生します。コードの何が問題になっていますか?

ありがとう！

4

1 に答える 1

5

そのための JQM 開発者からのプラグインがあることをご存知でしょう: JQM ページネーション

あなたの問題は複数のバインディングに関連していると思います。

すべてのバインドにaconsole.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トリガーされる複数のバインディングをページに添付します。changePageone

EDIT：
まず、最新のJqueryを使用している場合は、使用してバインドし、もうon/off使用しないでliveください。1 つの方法は、ページがリロードされたときにunbindonpagehideと re-を実行することです。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左スワイプ/右スワイプにも追加したので、一度にそれらをすべて削除できますoff

于 2012-08-30T08:31:11.353 に答える