有条件的多个无限滚动实例

Posted 2023-05-07

【中文标题】有条件的多个无限滚动实例

【英文标题】：Conditional Multiple Infinite Scroll Instances

【发布时间】：2021-01-25 06:17:44

【问题描述】：

我有一个产品类别页面，可以无限滚动加载下一个类别。这工作正常，但有些类别有多个页面，因此这些类别应在加载下一个类别之前加载下一页。代码可以加载下一个类别，但是当多页类别出现时不会加载下一页。如果您在多页类别中，代码会加载下一页，但随后它将停止工作。

这是我到目前为止所做的代码：如果下一页存在，我做了一个条件，对页面运行无限滚动并在最后一个时重新启动功能，如果没有，对类别运行无限滚动，并在完成后重新启动功能。

$(document).ready(function()
    (function foo() 

if ($('.page-numbers').length)

var $container = $('#main').infiniteScroll(
    path: ".page-numbers a.next",
    hideNav: ".woocommerce-pagination",
    append:  "#main ul.products",
    status: '.page-load-status',
    prefill: true,
    debug: true,
);

$container.on( 'history.infiniteScroll', function() 
  ga( 'set', 'page', location.pathname );
  ga( 'send', 'pageview' );
);


$container.on( 'last.infiniteScroll', function( event, response, path )    
    foo.call(this)
);

     else 

var nextURL;

function updateNextURL( doc ) 
  nextURL = $( doc ).find('.tax-pages a.next').attr('href');

// get initial nextURL
updateNextURL( document );

var $container2 = $('#main').infiniteScroll(
  // use function to set custom URLs
    path: function() 
    return nextURL;
    ,
    hideNav: ".tax-pages",
    append:  ".products-wrap",
    status: '.page-load-status',
    debug: true,
    prefill: true,
);

// update nextURL on page load
$container2.on( 'load.infiniteScroll', function( event, response ) 
  updateNextURL( response );
);

$container2.on( 'history.infiniteScroll', function() 
  ga( 'set', 'page', location.pathname );
  ga( 'send', 'pageview' );
    foo.call(this)

);


    ());
);

【参考方案1】：

以防万一有人需要它，我用一个无限滚动实例解决了它，并在下一个类别链接中包含了条件。

JS

 var nextURL;

function updateNextURL( doc ) 
  nextURL = $( doc ).find('.tax-pages a.next').attr('href');

// get initial nextURL
updateNextURL( document );

var $container2 = $('#main').infiniteScroll(
  // use function to set custom URLs
    path: function() 
    return nextURL;
    ,
    hideNav: ".tax-pages",
    append:  ".products-wrap",
    status: '.page-load-status',
    debug: true,
    prefill: true,
);

// update nextURL on page load
$container2.on( 'load.infiniteScroll', function( event, response ) 
  updateNextURL( response );
);

$container2.on( 'history.infiniteScroll', function() 
  ga( 'set', 'page', location.pathname );
  ga( 'send', 'pageview' );
);

php：我将此代码添加到this function。

if ( $next_term ) 
    
$next_link = get_next_posts_link();

if ($next_link)

        $link[] = '<div class="tax-pages"> <a class="next" href="' . get_next_posts_page_link() . '">Next</a></div>';
        
         else 
            
            
        $link[] = '<div class="tax-pages"> <a class="next" href="' . esc_url( get_term_link( $next_term ) ) . '">' . $next_term->name . '</a></div>';