Laravel + jscroll 真的只要 10 行程式碼就可以實現無限載入

Rachel發表於2019-03-21
LaravelJS行程

無限載入的實現方式通常有兩種:

一. 完全不需要點滑鼠, 滾到底部就載入, 但是這種非常不利於 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/

相關文章