如何實作無限滾動插件，在頁面滾動時從資料庫中自動加載更多資料？

我有一個Laravel Blade View，我正在使用下面的代碼從資料庫顯示大約280個產品。

@if (get_setting('best_selling') ==1)
    <部分 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"/span>>
                    <h3 class="h5 fw-700 mb-0"/span>>
                        <span class="border-bottom border-primary border-width-2 pb-3 d-line-block" > {{ translate('Just For You') }}</span> 
                    </h3>/span>
                    <a href=" . /search" class="ml-auto mr-0 btn btn-primary btn-sm shadow-md"> {{ translate('View More') }}</a> 
                </div>/span>
                <div class="row row-colls-xxl-7 row-colls-xl-6 row-colls-lg-5 row-colls-md-3 row-colls-2 gutters-10" > 
                    @foreach (filter_products(AppProduct::where('published', 1)->orderBy('id', 'desc'))->limit(280)->get() as $key => $product)
                        <div> 
                            @include('frontend.partials.product_box_1',['product' => $product])
                        </div> 
                    @endforeach
                    
                </div> @endforach
                
            </div>/span>
        </div>/span>
    </section>
@endif

部分的代碼。frontend.partials.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">/span>
        <a href="{路由（'產品', $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"/span> data-title="{{ translate('Add to wishlist') }}" data-placement="left"/span>> 
                <i class="la la-heart-o"> </i>
            </a>/span>
            <a href="javascript。 void(0)" onclick="addToCompare({{ $product-andgt; id }})" data-toggle="tooltip"/span> data-title="{{ translate('Add to compare') }}" data-placement="left"/span>> 
                <i class="las la-sync"/span>> </i>>
            </a>/span>
            <a href="javascript。 void(0)" onclick="showAddToCartModal({{ $product-> id }})" data-toggle="tooltip"/span> data-title="{{ translate('Add to cart') }}" data-placement="left"/span>> 
                <i class="las la-shopping-cart"/span>> </i>>
            </a>/span>
        </div>/span>
    </div>/span>
    <div class="p-md-3 p-2 text-left"/span>>
        <div class="fs-15"/span>>
            @if(home_base_price($product)!=home_discounted_base_price($product))
                <del class="fw-600 opacity-50 mr-1"/span>> {{ home_base_price($product) }}</del>>
            @endif
            <span class="fw-700 text-primary"/span>> {{home_discounted_base_price($product) }}</span> 
        </div>/span>
        <div class="rating rating-sm mt-1"> 
            {{ renderStarRating($product->rating) }}}
        </div> 
        <h3 class="fw-600 fs-13 text-truncat-2 lh-1-4 mb-0 h-35px"/span>>
            <a href="{ route（'product', $product-> slug) }}" class="d-block text-reset" > {{$product->getTranslation('name') }}</a> 
        </h3>/span>
        @if (addon_is_activated('club_point'))
            <div class="rounded px-2 mt-2 bg-soft-primary border-soft-primary border"/span>>
                {{ translate('Club Point') }}:
                <span class="fw-700 float-right"/span>> {{$product->earn_point }}</span>。
            </div> 
        @endif
    </div> @endif
</div>/span>

代碼的輸出

我想實施無限滾動插件，因為我的產品從資料庫加載需要太多的時間。這對最終用戶來說是非常不方便的，所以我想讓互動性更強，對用戶更友好。如果有任何幫助，我們將不勝感激。

uj5u.com熱心網友回復：

這是一個非常簡單的解決方案，只需遵循以下步驟。

1. 在你的刀片中包含插件腳本
   

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

2. 在<input type="hidden" name="max_price" value="">下替換以下代碼。
   

    < div class="article-feed row gutters-5 row-colls-xxl-4 row-colls-xl-4 row-colls-lg-4 row-colls-md-3 row-colls-2" > @foreach （$products as $key => $product)
    <article class="article"> 
    @include('frontend.partials.product_box_1',['product' => $product])
    </article>                                     
    @endforeach
    </div> @endforach
    <div class="aiz-pagination aiz-pagination-center mt-4" >
    {{$products->appends(request()->input())->links() }}}.
    </div> 
   
    <!--狀態元素-->
    <div class="scroller-status">/span>
    <div class="infinite-scroll-request loader-ellips"/span>>
    ...
    </div>/span> ...
    <p class="infinite-scroll-last"/span>> 內容結束</p> 
    <p class="infinite-scroll-error"/span>> 沒有更多的頁面加載</p>>
    </div>/span>
   
    <!--分頁有路徑-->
    <p class="pagination">
    <a class="pagination__next" href=" 。 ./search?page=2"></a>
    </p> 
   

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