0

iOS と Android の両方をサポートする必要がある JQuery Mobile を使用してアプリケーションを作成しています。（私はPhoneGapを使用しています）。div長いページのスクロールはデフォルトで機能しますか、それともスクロールをサポートするように設定する必要がありますか? iOS でのスクロールは Android デバイスとどう違うのですか?

また、ユーザーがページの一番下までスクロールしてさらにコンテンツを取得するときに ajax 呼び出しを行う方法はありますか?

どんな助けでも大歓迎です。

4

2 に答える 2

2

1) jQuery Mobile 1.1.0 はブラウザーのネイティブ スクロールを使用するため、サポートされているすべてのプラットフォームで自然に表示されます。

ただし、jQuery Mobiles には次の疑似ページ構造が必要です。

<div data-role="page">
    <div data-role="header">
        ...
    </div>
    <div data-role="content">
        ...
    </div>
    <div data-role="footer">
        ...
    </div>
</div>

data-role="content"この構造に従うと、セクションを追加すればするほど、ページが長くなります。

2)イベントのイベント ハンドラーを設定してscroll、ユーザーのスクロールを検出し、ユーザーがページをどれだけ下にいるかを確認できます。

//you don't want to set a bunch of AJAX requests at once,
//so set a flag so only one will go off at a time
var ajaxOK = true;
$(window).on('scroll', function () {
    var yDistance = $('html, body').scrollTop();

    //here you can check how far down the user is and do your AJAX call
    if ((yDistance + $(window).height()) > ($.mobile.activePage.children('.ui-content').height() - 150)) {
        //the user is within 150px of the bottom of the page
        if (ajaxOK === true) {
            ajaxOK = false;
            $.ajax({ ... });
        }
    }
});

次に、AJAX 呼び出しのコールバック関数でajaxOK = true;、ユーザーが再び一番下までスクロールしたときに起動するように設定します。

以下は、イベント ハンドラーif/then内のステートメントの簡単な内訳です​​。scroll

(yDistance + $(window).height()) > ($.mobile.activePage.children('.ui-content').height() - 150)
  1. (yDistance + $(window).height()): スクロール距離にビューポートの高さを加えたもので、ページの Y 座標の下部を見つけます。
  2. ($.mobile.activePage.children('.ui-content').height() - 150): 現在のページの高さから のバッファーを差し引いた値で150px、ユーザーがその中に入ることができ150px、AJAX 呼び出しが発生します。
于 2012-05-07T22:06:58.367 に答える
0

ブラウザ ウィンドウがオーバーフローした場合、スクロールは自動的に行われます。無限スクロールについては、 http://www.infinite-scroll.com/を試すことができます。

jquery モバイル用のリストビューを使用している場合は、dom にリスト ビュー アイテムを追加した後に、refresh イベントを呼び出して、フィルタリング動作とスタイル設定を機能させる必要がある場合があります。

于 2012-05-07T21:56:25.650 に答える