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

Posted 2023-05-07

【中文标题】如何实现无限滚动插件以从数据库自动加载更多页面滚动数据？

【英文标题】：How to implement Infinite scroll plugin to auto load more data on page scroll from database?

【发布时间】：2021-11-13 12:39:51

【问题描述】：

我有一个 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) "
                
                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 插件，因为我的产品从数据库加载需要太多时间。这对最终用户来说非常不方便，所以我想让交互更具交互性和用户友好性。任何帮助将不胜感激。

【问题讨论】：

google 搜索：jsfiddle 无限滚动，你会找到例子。在插件站点上也是一个演示。

@BernhardBeatus 谢谢，但我的场景与插件文档有很大不同，您可以看看我上面的代码示例。

能否贴出部分代码：frontend.partials.product_box_1

【参考方案1】：

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

在刀片中包含插件脚本<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></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 function 下方添加到刀片视图的末尾

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

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