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/

本帖由 Summer 于 4个月前 加精
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 3

不好意思, 为了满足我自己想要的效果, 反复修改了两次, 貌似已经不止 10 行代码了 :joy: 做回标题党吧 :grin:

4个月前 评论
largezhou

最近刚做了一个小网站,,,也做了触底加载和图片懒加载,,,用的原生 IntersectionObserver ,爽的一批,,,

4个月前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!