无限 Scroll.js 在滚动条上加载相同的产品，而不是下一页的产品 - BigCommerce 问题？

Question

我尝试了下面 link 中提到的相同代码，但出于某种原因，它只加载（克隆）当前页面的项目，而不是下一页的项目？？？有什么想法吗？

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

Answer 1

看起来所有分页 link 都有 class .pagination-link，包括编号（1、2、3 等）。正在发生的事情是 Infinite Scroll 库正在获取带有 class 的第一个元素，它恰好是 page=1，所以这是被附加的第一页。

尝试更新您的代码以指定路径 link 应该是 'Next' 分页 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>

感谢提醒——我会更新我之前关于 post 你 link 的回答:)

无限 Scroll.js 在滚动条上加载相同的产品，而不是下一页的产品 - BigCommerce 问题？

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

lazy-loading

autoload

infinite-scroll

bigcommerce