Laravel + jscroll 真的只要 10 行代码就可以实现无限加载

Rachel 的个人博客 / 1 / 4 / 创建于 6年前 / 更新于 6年前

无限加载的实现方式通常有两种:

一。完全不需要点鼠标，滚到底部就加载，但是这种非常不利于 SEO, 而且用户体验也不见得很好，有种望不到边的感觉.
二。需要手动点击 "加载下一页" 才加载.
我的选择：二者结合的方式，即第二页是自动加载的，后面需要手动点击.
原因：可以很好地展示页脚，利于 SEO.

php 部分:#

在检索列表页数据的时候只要在 query builder 最后调用分页的方法 paginate () 就可以了。注意这里必须用 paginate () 函数，不能用 simplePaginate (), 因为后面需要用到查看页码的方法，simplePaginate () 都不支持.
参考文档: https://learnku.com/docs/laravel/5.8/pagination

public function index()
{
    $posts = Post::isChecked()->orderBy('updated_at', 'desc')->paginate(10);

    .............省略其他.........
 }

Html 部分:#

这段代码放在列表页，位置要紧跟在列表循环的后面:

{{--这个类名对应下面 JS 选择器里写的类名--}}
<ul class="infinite-scroll">
    {{--循环输出列表--}}
    @if(!empty($posts))
        @foreach($posts as $post)
            <li class="media">
                ........ 省略 ........
            </li>
        @endforeach
    @endif

    {{--点击加载下一页的按钮--}}
    <div class="text-center">
        {{--判断到最后一页就终止, 否则 jscroll 又会从第一页开始一直循环加载--}}
        @if( $posts->currentPage() == $posts->lastPage())
            <span class="text-center text-muted">没有更多了</span>
        @else
            {{-- 这里调用 paginator 对象的 nextPageUrl() 方法, 以获得下一页的路由 --}}
            <a class="jscroll-next btn btn-outline-secondary btn-block rounded-pill" href="{{ $posts->nextPageUrl() }}">
                加载更多....
            </a>
        @endif
    </div>
</ul>

JS 部分:#

<script src="https://cdn.bootcss.com/jscroll/2.4.1/jquery.jscroll.min.js"></script>

<script>
        $(function() {
            var options = {
                // 当滚动到底部时,自动加载下一页
                autoTrigger: true,
                // 限制自动加载, 仅限前两页, 后面就要用户点击才加载
                autoTriggerUntil: 1,
                // 设置加载下一页缓冲时的图片
                loadingHtml: '<img class="align-self-center" src="/img/loading.jpg" alt="Loading..." style="width: 80px"/>',
                //设置距离底部多远时开始加载下一页
                padding: 0,
                nextSelector: 'a.jscroll-next:last',
                // 下一个自动加载的位置
                contentSelector: 'ul.infinite-scroll'
            };

            $('.infinite-scroll').jscroll(options);
        });
    </script>