滚动到页面末尾时附加更多内容

Question

嗨，我只是一个月前才开始使用JQuery Mobile，我的起始项目是构建一个应用程序来加载我的博客文章。 在花了整天的时间研究和获得SO的支持之后，我确实设法加载了我的博客文章，并添加了一个Load More链接来附加新内容。

我的目的不是要使用链接，而是要在滚动到页面末尾时附加新内容。 我暂时不打算使用插件，但希望我可以编写一个简单的代码为我完成此任务。 这是我当前的代码（第一个函数将加载初始内容，而第二个函数将附加更多内容。不确定这是否是最佳方法，但就像我说的那样，我仍在学习中）

$(document).on('pagebeforeshow', '#blogposts', function () {
    $.ajax({
        url: "http://howtodeployit.com/?json=recentstories",
        dataType: "json",
        beforeSend: function () {
            $('#loader').show();
        },
        complete: function () {
            $('#loader').hide();
        },
        success: function (data) {
            $('#postlist').empty();
            $.each(data.posts, function (key, val) {

                //Output data collected into page content
                var rtitle = $('<p/>', {
                    'class': 'vtitle',
                    html: val.title
                }),
                var rappend = $('<li/>').append(rtitle);
                $('#postlist').append(rappend);
                return (key !== 5);
            });
            $("#postlist").listview().listview('refresh');
        },
        error: function (data) {
            alert("Service currently not available, please try again later...");
        }
    });
});

$(document).on("click", ".load-more", function () {
    $.getJSON("http://howtodeployit.com/?json=recentstories", function (data) {
        var currentPost = $('#postlist');
        console.log(currentPost);
        loadMore = currentPost.parent().find('.load-more');
        var currentPostcount = $('#postlist li').length;
        console.log(currentPostcount);
        var desiredPosts = 3;
        newposts = data.posts.slice(currentPostcount, currentPostcount + desiredPosts);
        $.each(newposts, function (key, val) {
            var rtitle = $('<p/>', {
                'class': 'vtitle',
                html: val.title
            }),
            var rappend = $('<li/>').append(rtitle);
            $('#postlist').append(rappend);
            $("#postlist").listview('refresh');

        });
    });
});

抱歉，如果在其他地方回答过此类问题。 请发布链接

Answer 1

试试这个例子，它的工作原理。

function loaddata()
{
    var el = $("outer");
    if( (el.scrollTop + el.clientHeight) >= el.scrollHeight )
    {
        el.setStyles( { "background-color": "green"} );
    }
    else
    {
        el.setStyles( { "background-color": "red"} );
    }
}

window.addEvent( "domready", function()
{
    $("outer").addEvent( "scroll", loaddata );
} );

小提琴是

http://jsfiddle.net/wWmqr/1/

Answer 2

这是jquery的典型方法，

$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
         /*end reached*/
        $('.content').html($('.content').html()+"more</br></br></br></br>");
    }
});

jqm的示例， http：//jsfiddle.net/F5McF/