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

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

一. 完全不需要点鼠标, 滚到底部就加载, 但是这种非常不利于 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>

jscroll 官方: https://jscroll.com/

本作品采用《CC 协议》，转载必须注明作者和本文链接