0

嗨，我一个月前才开始使用 JQuery Mobile，我的开始项目是构建一个应用程序来加载我的博客文章。经过日夜的研究和 SO 的支持后，我确实设法加载了我的博客文章，并添加了一个加载更多链接来附加新内容。

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

$(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');

        });
    });
});

抱歉，如果此类问题已在其他地方得到解答。请发链接

4

2 回答 2

0

试试这个例子吧。

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/

于 2013-10-31T09:36:02.420 回答
0

这是使用 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/

于 2013-10-31T09:40:33.423 回答