7

我正在寻找一种在向下滚动后将更多列表添加到列表视图底部的方法。例如，我最初有 20 件商品的退货。我打算使用分页并只返回从我的查询返回的数量，但我宁愿返回 15-20 然后在滚动结束时自动添加更多到此列表或有一个按钮显示“查看更多” . 我是 jQuery Mobile 的新手，想知道是否有人见过这种事情的实现。这也被用于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 回答