0

こんにちは、私は 1 か月前に JQuery Mobile の作業を開始したばかりで、最初のプロジェクトはブログ投稿を読み込むためのアプリを構築することでした。SO からの調査とサポートに日夜を費やした後、なんとかブログ記事を読み込んで、新しいコンテンツを追加するための [さらに読み込む] リンクを追加しました。

私の意図は、リンクを使用するのではなく、ページの最後までスクロールしたときに新しいコンテンツを追加することです。今のところプラグインを使用する予定はありませんが、それを行うための簡単なコードを書けることを望んでいました。これは私の現在のコードです（最初のコンテンツをロードする最初の関数で、2番目の関数はさらにコンテンツを追加することです。これが最善のアプローチであるかどうかはわかりませんが、私が言ったように、私はまだ学習中です）

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

これは 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 に答える
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 に答える