Question

嗨我一个月前才开始使用JQuery Mobile，我的开始项目是构建一个应用来加载我的博客文章。在花了几天时间研究和支持SO后，我确实设法加载我的博客帖子，并添加了一个“加载更多”链接来添加新内容。

我的意图是不是使用链接，我想在滚动到页面末尾时附加新内容。我现在不打算使用插件，但希望我能写一个简单的代码来为我做这个。这是我当前的代码（第一个加载初始contenst的函数，而第二个函数是附加更多内容。不确定这是否是最好的方法，但就像我说的那样，我还在学习过程中）

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

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

2 个答案: