寻找一种方式来动态地添加更多的名单，jQuery Mobile的列表视图的底部

问题描述

我要寻找一种方式向下滚动之后，更多的列表添加到我的列表视图的底部。举例来说，我有一个回归的20个项目开始。我将使用一个分页和同样多的从我的查询回来回来，但我宁愿回到15-20然后在滚动要么自动添加更多此列表或有一个按钮的结尾说：查看更多 。我是新使用jQuery Mobile，如果有人已经看到了这样的事情想实现的。这也正在PhoneGap的使用。如果是这样你可以点我在正确的方向？很多提前感谢！

I am looking for a way to add more lists to the bottom of my listview after scrolling down. For instance, I have a return of 20 items initially. I was going to use a pagination and just return as many as come back from my query, BUT I'd rather return 15-20 then at the end of scrolling either automatically add more to this list or have a button saying "view more". I'm new with jQuery Mobile and wondering if anyone has seen this sort of thing implemented. This is also being used in Phonegap. If so can you point me in the right direction? Much thanks in advance!

推荐答案

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

Instead of automatically loading more list-items, I suggest placing a button users can tap to load more (but that's just my suggestion).

//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
        }
    }
});

下面是一个演示：

这是一个有点容易只是加载一个按钮，用户可以点击，那么当它的挖掘，装载更多的行，然后在加载更多按钮重新追加到列表的末尾

It's a bit easier to just load a button that the user can tap, then when it's tapped, load more rows and then re-append the load-more button to the end of the list:

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');
});​

下面是一个演示：

这篇关于寻找一种方式来动态地添加更多的名单，jQuery Mobile的列表视图的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！