Infinite Scroll.js loads same products on scroll, instead of products from next page - BigCommerce issue?

问题

I tried the same code as mentioned in the link below, but for some reason on my end it loads (clones) only the items from the current page, not the ones from the next page ???? Any ideas why ?

How to add Infinite Scroll to BigCommerce Category page

<ul class="productGrid" data-infinite-scroll='{ "path": ".pagination-link", "append": ".product", "history": false }'>
{{#each products}}
<li class="product">
    {{>components/products/card show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer}}
</li>
{{/each}}
</ul>


<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script> 

回答1:

It looks like all pagination links have the class .pagination-link, including the numbered ones (1,2,3 etc). What's happening is that the Infinite Scroll library is grabbing the first element with that class, which happens to be page=1, so that's the first page that's being appended.

Try updating your code to this to specify that the path link should be the 'Next' pagination link:

<ul class="productGrid" data-infinite-scroll='{ "path": ".pagination-item--next .pagination-link", "append": ".product", "history": false }'>
    {{#each products}}
    <li class="product">
            {{>components/products/card settings=../settings show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer event=../event position=(add @index 1)}}
    </li>
    {{/each}}
</ul>

Thanks for the heads up--I'll update my previous answer on the post you linked to :)

来源：https://stackoverflow.com/questions/54675696/infinite-scroll-js-loads-same-products-on-scroll-instead-of-products-from-next