如何实现无限滚动插件自动加载更多的数据页面滚动从数据库？

我有一个Laravel Blade View，我使用下面的代码显示大约280个产品的数据库。

@if (get_setting('best_selling') == 1)
    <section class="mb-4">
        <div class="container">
            <div class="px-2 py-4 px-md-4 py-md-3 bg-white shadow-sm rounded">
                <div class="d-flex mb-3 align-items-baseline border-bottom">
                    <h3 class="h5 fw-700 mb-0">
                        <span class="border-bottom border-primary border-width-2 pb-3 d-inline-block">{{ translate('Just For You') }}</span>
                    </h3>
                    <a href="../search" class="ml-auto mr-0 btn btn-primary btn-sm shadow-md">{{ translate('View More') }}</a>
                </div>
                <div class="row row-cols-xxl-7 row-cols-xl-6 row-cols-lg-5 row-cols-md-3 row-cols-2 gutters-10">
                    @foreach (filter_products(\App\Product::where('published', 1)->orderBy('id', 'desc'))->limit(280)->get() as $key => $product)
                        <div>
                            @include('frontend.partials.product_box_1',['product' => $product])
                        </div>
                    @endforeach
                    
                </div>
                
            </div>
        </div>
    </section>
@endif

partial的代码:frontend。partial 。product_box_1

<div class="aiz-card-box border border-light rounded hov-shadow-md mt-1 mb-2 has-transition bg-white">
    <div class="position-relative">
        <a href="{{ route('product', $product->slug) }}" class="d-block">
            <img
                class="img-fit lazyload mx-auto h-140px h-md-210px"
                src="{{ static_asset('assets/img/placeholder.jpg') }}"
                data-src="{{ uploaded_asset($product->thumbnail_img) }}"
                alt="{{  $product->getTranslation('name')  }}"
                onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';"
            >
        </a>
        <div class="absolute-top-right aiz-p-hov-icon">
            <a href="javascript:void(0)" onclick="addToWishList({{ $product->id }})" data-toggle="tooltip" data-title="{{ translate('Add to wishlist') }}" data-placement="left">
                <i class="la la-heart-o"></i>
            </a>
            <a href="javascript:void(0)" onclick="addToCompare({{ $product->id }})" data-toggle="tooltip" data-title="{{ translate('Add to compare') }}" data-placement="left">
                <i class="las la-sync"></i>
            </a>
            <a href="javascript:void(0)" onclick="showAddToCartModal({{ $product->id }})" data-toggle="tooltip" data-title="{{ translate('Add to cart') }}" data-placement="left">
                <i class="las la-shopping-cart"></i>
            </a>
        </div>
    </div>
    <div class="p-md-3 p-2 text-left">
        <div class="fs-15">
            @if(home_base_price($product) != home_discounted_base_price($product))
                <del class="fw-600 opacity-50 mr-1">{{ home_base_price($product) }}</del>
            @endif
            <span class="fw-700 text-primary">{{ home_discounted_base_price($product) }}</span>
        </div>
        <div class="rating rating-sm mt-1">
            {{ renderStarRating($product->rating) }}
        </div>
        <h3 class="fw-600 fs-13 text-truncate-2 lh-1-4 mb-0 h-35px">
            <a href="{{ route('product', $product->slug) }}" class="d-block text-reset">{{  $product->getTranslation('name')  }}</a>
        </h3>
        @if (addon_is_activated('club_point'))
            <div class="rounded px-2 mt-2 bg-soft-primary border-soft-primary border">
                {{ translate('Club Point') }}:
                <span class="fw-700 float-right">{{ $product->earn_point }}</span>
            </div>
        @endif
    </div>
</div>

代码的输出

我想实现无限滚动插件，因为我的产品需要太多的时间从数据库加载。这对于终端用户来说是非常不方便的，所以我想让交互更具有互动性和人性化。任何帮助将非常感谢。

###这是一个非常简单的解决方案，只需遵循以下步骤。

在你的刀片中包含插件脚本

& lt;脚本src = " https://unpkg。com/infinite-scroll@4 / dist / infinite-scroll。pkgd。min。js”祝辞& lt; / script>

input type="hidden" name="max_price" value="">

 <div class="article-feed row gutters-5 row-cols-xxl-4 row-cols-xl-4 row-cols-lg-4 row-cols-md-3 row-cols-2">@foreach ($products as $key => $product)
 <article class="article">
 @include('frontend.partials.product_box_1',['product' => $product])
 </article>                                    
 @endforeach
 </div>
 <div class="aiz-pagination aiz-pagination-center mt-4">
 {{ $products->appends(request()->input())->links() }}
 </div>
 <!-- status elements -->
 <div class="scroller-status">
 <div class="infinite-scroll-request loader-ellips">
 ...
 </div>
 <p class="infinite-scroll-last">End of content</p>
 <p class="infinite-scroll-error">No more pages to load</p>
 </div>
 <!-- pagination has path -->
 <p class="pagination">
 <a class="pagination__next" href="../search?page=2"></a>
 </p>

将下面的JQuery函数添加到刀片视图的末尾

@section('script')
<script>
    $('.article-feed').infiniteScroll({
      path: '.pagination__next',
      append: '.article',
      status: '.scroller-status',
      hideNav: '.pagination',
    });
</script>
@endsection

我希望它能正常工作。如果这对你不起作用，请在评论区告诉我，我会帮助你。