1

これは、ネイティブ アプリの phonegap に移植されます。約 1,000 のエントリを含むフィルター処理されたリストがあります。各エントリには、固有の画像と固有のテキストが含まれます。私はそれをテストしてきましたが、明らかなパフォーマンスの問題があります。読み込みには約 30 秒かかり、何かを検索すると、アイテムが表示されるまでにさらに 30 秒かかります。

リストを 20 個または 25 個のアイテムに制限する方法があるかどうか疑問に思っていました。ユーザーが下にスクロールすると、アプリはアイテムのフィルタリングを続けます (Android の gmail と同様)。そうすれば、アプリの応答が速くなります。

jsFiddleの例を次に示します。すべてのイメージが同じであり、アイテムがほんの一握りであるため、パフォーマンスの問題は発生しませんが、構造を確認できます。

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Type Search Criteria" data-filter-theme="c">
        <li class="ad"><a href='#xpage'>
             <img src="http://www.appmalt.info/AMobile/Birdapp/img/none.jpg"/>
            <h2>Abcdefghijklmnopqr</h2>
            <p><i>amessage</i></p>
            <p class="ui-li-aside" ><i class='icon-remove'></i><font color="#cccccc" >NOT SEEN</font></p>
        </a></li>
        <li class="ad"><a href='#xpage'>
            <img src="http://www.appmalt.info/AMobile/Birdapp/img/none.jpg"/>
            <h2>Abcdefghijklmnopqr</h2>
            <p><i>amessage</i></p>
            <p class="ui-li-aside"><i class='icon-ok'></i><font color="green" style='font-weight:bold;padding-left:0.7em;'>SEEN IT!</font></p>
        </a></li>
   ...
   *****CONTINUE THIS FOR 1000 ENTRIES****
   ...
</ul>
4

2 に答える 2

2

あなたはこれを使うことができます

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
       //Place ajax call here
   }
});

(Ranの功績 How do I use JQuery to detect if the user is scrolled to the page of? )

アラートの代わりに ajax 呼び出しを配置し​​て、次の X エントリを要求します。カウンターを保持する必要があります (そのため、どのエントリを要求するかがわかります)。

// if ステートメントの計算に修正が必要かもしれません。それはプロジェクトによって異なります。

//コンテンツのサイズに関連して発生する可能性があるこの問題に注意してくださいJQuery Mobile User scroll to bottom . davehale23 へのクレジット

于 2013-05-16T19:29:43.773 に答える
1

あなたはこれを使うことができます

var timer    = setInterval(function () {
    scrollOK = true;
}, 100),
scrollOK = true,
count    = 20;
$(window).bind('scroll', function () {
if (scrollOK) {
    scrollOK = false;
    if ($(this).scrollTop() + $(this).height() >= ($(document).height() - 100)) {
        //now load more list-items because the user is within 100px of the bottom of the page
        console.log('You Hit Bottom!');
        var out = [];
        for (var i = 0; i < 10; i++) {
            out.push('<li>' + (count++) + '</li>');
        }
        $('ul').append(out.join('')).listview('refresh');
    }
}
});

http://jsfiddle.net/knuTW/

于 2014-02-19T09:26:08.263 に答える