滾動到頁面末尾時附加更多內容

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/