Question

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

Answer 1

我已经实现了这个功能，我在这里用代码片段解释它以供你应用。干杯;）

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

Answer 2

使用这个Wordpress插件可能对你有用

http://wordpress.org/extend/plugins/infinite-scroll/

如何使用jquery触发器单击或解决方法实现无限滚动

2 个答案: