0

このテーマの設定に基づいて動作するように、div内で無限スクロールを取得しようとしています。リストの下部に「さらに読み込む」リンクがあり、クリックするとajaxを介してコンテンツが読み込まれます。WP（最新）とBuddypress（最新）を使用しています。私はクエリとphpが得意ではないので、基本的にそれを回避するためのちょっとしたトリックを見つけました。トリガーされた「クリック」をトリガーしてコンテンツをロードするため、半分は機能しますが、ユーザーがスクロールを続けるたびに、コンテンツをロードし続けます。最後の2セット（複製）をロードし、スクロールごとにロードするコンテンツがない場合にエラーを出します。デフォルトでは、ページのロード中にロードするコンテンツがない場合にのみ表示されます。まず、これは「loadmore」リンクが機能するために使用するスクリプトです。

jq('div.activity').click( function(event) {
    var target = jq(event.target);

    if ( target.parent().hasClass('load-more') ) {
        jq("li.load-more").addClass('loading');

        if ( null == jq.cookie('bp-activity-oldestpage') )
            jq.cookie('bp-activity-oldestpage', 1, {path: '/'} );

        var oldest_page = ( jq.cookie('bp-activity-oldestpage') * 1 ) + 1;

        jq.post( ajaxurl, {
            action: 'activity_get_older_updates',
            'cookie': encodeURIComponent(document.cookie),
            'page': oldest_page
        },
        function(response)
        {
            jq("#content li.load-more").removeClass('loading');
            jq.cookie( 'bp-activity-oldestpage', oldest_page, {path: '/'} );
            jq("#content ul.activity-list").append( response.contents, function(){

            jq('li.post').hide().each(function(index) {
                timeOuts[index] = setTimeout(myFadeIn, index*100, jq(this));
            });
            });
            target.parent().hide();

        }, 'json' );


        return false;
    }
});
});

これは、ユーザーが#contentdivの最後までスクロールしたときにそのリンクをクリックするトリガーとなる小さな回避策です。

jq( function($) {
$('#content').bind('scroll', function() {
    if($(this).scrollTop() + 
       $(this).innerHeight()
        >= $(this)[0].scrollHeight)
       {
        jq("#content li.load-more a").trigger('click', function(e){
        e.preventDefault();
        });

        }
     })
});

念のためループを含むHtmlは次のとおりです。

<div id="content">
<div class="activity">
<?php if ( bp_has_activities( bp_ajax_querystring( 'activity' ) ) ) : ?>

<?php /* Show pagination if JS is not enabled, since the "Load More" link will do nothing */ ?>
<noscript>
    <div class="pagination">
        <div class="pag-count"><?php bp_activity_pagination_count(); ?></div>
        <div class="pagination-links"><?php bp_activity_pagination_links(); ?></div>
    </div>
</noscript>

<?php if ( empty( $_POST['page'] ) ) : ?>

    <ul id="activity-stream" class="activity-list item-list">

<?php endif; ?>

<?php while ( bp_activities() ) : bp_the_activity(); ?>

    <?php locate_template( array( 'activity/entry.php' ), true, false ); ?>

<?php endwhile; ?>

<?php if ( bp_activity_has_more_items() ) : ?>

    <li class="load-more yori">
        <a class="thiss" href="#more"><?php _e( 'Load More', 'buddypress' ); ?></a>
    </li>

<?php endif; ?>

<?php if ( empty( $_POST['page'] ) ) : ?>

    </ul>

<?php endif; ?>

<?php else : ?>

<div id="message" class="info">
    <p><?php _e( 'Sorry, there was no activity found. Please try a different filter.', 'buddypress' ); ?></p>
</div>

<?php endif; ?>

</div>
</div>

私が言ったように、それは動作しますが、それはエラーがあり、かなりずさんなので、これを行うためのよりクリーンな方法があることを私は知っています笑。それが私が理解しようとしていることです。WPのものを含め、非常に多くの無限スクロールプラグインを試しましたが、それらは私がやろうとしていることでは機能しないようです。Buddypressが「load-more」を設定する方法と関係があると思います。不可能なことは何もありません、それで私はあなたたちが助けてくれる必要があります:)

4

2 に答える 2

2

私はその機能を実現しました。ここでは、適用するコードスニペットを使用して説明します。乾杯 ;）

http://buddypress.org/community/groups/creating-extending/forum/topic/auto-load-more-activity-stream-items-when-scroll-reaches-the-bottom-of-the-page/?topic_page = 1＆num = 15

于 2012-06-15T19:15:24.057 に答える
1

このWordpressプラグインを使用してくださいこれはあなたにとって便利かもしれません

http://wordpress.org/extend/plugins/infinite-scroll/
于 2012-04-11T04:33:56.337 に答える