0

我试图在 div 内无限滚动以根据此主题中的设置工作。它在列表底部有一个“加载更多”链接，单击该链接时，将通过 ajax 加载内容。我正在使用 WP（最新）和 Buddypress（最新）。我发现了一个基本绕过它的小技巧，因为我不是最擅长查询和 php。它工作了一半，因为它确实触发了触发的“点击”并加载了内容，但是每次用户继续滚动时，它都会继续加载内容。它加载最后两组（重复），然后在每次滚动没有要加载的内容时给出错误，默认情况下仅在页面加载期间没有要加载的内容时显示。首先，这是“加载更多”链接用于工作的脚本：

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;
    }
});
});

这是当用户滚动到#content div末尾时触发单击该链接的小工作：

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 设置“加载更多”的方式有关。没有什么是不可能的，这就是为什么我需要你们帮助:)

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 回答