jquery - 寻找一种方法来动态添加更多列表到 jQuery Mobile ListView 的底部

Question

我正在寻找一种在向下滚动后将更多列表添加到 ListView 底部的方法。例如，我最初返回了 20 件商品。我打算使用分页，只返回从查询中返回的尽可能多的内容，但我宁愿返回 15-20，然后在滚动结束时自动向此列表添加更多内容，或者有一个按钮显示“查看更多” 。我是 jQuery Mobile 的新手，想知道是否有人见过这种事情的实现。这也被用在 Phonegap 中。如果是这样，你能指出我正确的方向吗？非常感谢!

Answer 1

我建议不要自动加载更多列表项，而是放置一个用户可以点击以加载更多列表项的按钮(但这只是我的建议)。

//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/