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

Question

我有一个 Laravel Blade View 我正在使用下面的代码显示来自 database 的大约 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

部分代码：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">
        <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>

Output Of the code

我想实现Infinite Scroll 插件，因为我的产品从数据库加载需要太多时间。这对最终用户来说非常不方便，所以我想让交互更具交互性和用户友好性。任何帮助将不胜感激。

Answer 1

这是一个非常简单的解决方案，只需按照以下步骤操作即可。

1. 在刀片中包含插件脚本
   <script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>

2. 替换下面<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 function 下方添加到刀片视图的末尾

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

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