7

下にスクロールした後、リストビューの下部にリストを追加する方法を探しています。たとえば、最初は20アイテムの返品があります。ページ付けを使用して、クエリから戻ってきた数だけ返すつもりでしたが、15〜20を返し、スクロールの最後にこのリストに自動的に追加するか、「もっと見る」というボタンを表示します。 。私はjQueryMobileを初めて使用し、この種の実装を見た人はいないかと思います。これはPhonegapでも使用されています。もしそうなら、あなたは私を正しい方向に向けることができますか？よろしくお願いします！

4

3 に答える 3

18

より多くのリストアイテムを自動的にロードする代わりに、ユーザーがタップしてさらにロードできるボタンを配置することをお勧めします（ただし、これは私の提案です）。

//setup an interval so we can throttle the `scroll` event handler since there will be tons of `scroll` events fired
var timer    = setInterval(function () {
        scrollOK = true;
    }, 100),//run this every tenth of a second
    scrollOK = true;//setup flag to check if it's OK to run the event handler
$(window).bind('scroll', function () {

    //check if it's OK to run code
    if (scrollOK) {

        //set flag so the interval has to reset it to run this event handler again
        scrollOK = false;

        //check if the user has scrolled within 100px of the bottom of the page
        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
        }
    }
});

これがデモです：http：//jsfiddle.net/knuTW/

アップデート

ユーザーがタップできるボタンをロードする方が少し簡単です。次に、ボタンをタップしたら、さらに行をロードload-moreして、リストの最後にボタンを再度追加します。

var $loadMore = $('ul').children('.load-more');
$loadMore.bind('click', function () {
    var out = [];
    for (var i = 0; i < 10; i++) {
        out.push('<li>' + (count++) + '</li>');
    }
    $('ul').append(out.join('')).append($loadMore).listview('refresh');
});​

これがデモです：http：//jsfiddle.net/knuTW/2/

于 2012-03-08T19:43:35.703 に答える
3

これは役立つかもしれない例です：

http://jsfiddle.net/dhavaln/nVLZA/

// load test data initially
for (i=0; i < 20; i++) {
    $("#list").append($("<li><a href=\"index.html\"><h3>" + i + "</h3><p>z</p></a></li>"));
}
$("#list").listview('refresh');


// load new data when reached at bottom
$('#footer').waypoint(function(a, b) {
    $("#list").append($("<li><a href=\"index.html\"><h3>" + i+++"</h3><p>z</p></a></li>"));
    $("#list").listview('refresh');
    $('#footer').waypoint({
        offset: '100%'
    });
}, {
    offset: '100%'
});​
于 2012-03-08T19:47:29.377 に答える
0

「永遠にスクロールする」と「無限にスクロールする」の方法を説明している記事がいくつかあります。

それらの背後にある考え方は、ユーザーが下から所定の数のアイテムまでスクロールダウンしたときに、非同期により多くのデータをロードすることです。

ただし、この方法には、スクロールバー自体からうそをつくという既知の問題があります。

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
http://masonry.desandro.com/demos/infinite-scroll.html
http://designbeep.com/2011/08/12 / 12-jquery-infinite-scrollingscroll-read-plugins-for-content-navigation / http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/

于 2012-03-08T20:12:08.880 に答える