TwitterやFacebookのような、画面をスクロールしたら続きが読み込まれるUIってどうやって実装するんだろ。
と思って調べたらInfinite ScrollというJavaScriptのライブラリが見つかりました。
てことで、今回はLaravelのpaginateと無限スクロール用ライブラリのInfinite Scrollを使い、データベース内のデータを無限スクロールで表示する方法を説明します。
この記事の内容
Infinite Scrollとは?
まずInfinite Scrollについて。
これは、画面を下にスクロールすると続きのページを表示する、いわゆる「無限スクロール」のUIを簡単に実装できるJavaScriptのライブラリです。
以下が公式のサイト。
https://infinite-scroll.com/
使い方は覚えてしまえば簡単です。
必要なのは以下の手順。
- jsを読み込む。
- jsでInfinite Scrollの関数を呼びだす。
- Infinite Scrollの仕様に合わせてHTMLを書く。
- コントローラでpaginateを取得しビューに渡す。
ざっくり、そんな感じです。
Infinite Scroll(バージョン3)を読み込む
jqueryとInfinite Scrollを読み込みます。
Infinite Scrollはバージョン3を使っています。
バージョン2は使い方が全然違うので、要注意です。
それぞれのWebサイトからjsをダウロードし、Laravelプロジェクトのpublic/js/に配置します。
resources/js/app.js に以下を追記し、2つのjsを読み込みます。
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> (略) <script src="{{ asset('js/jquery.min.js') }}"></script> <script src="{{ asset('js/infinite-scroll.pkgd.min.js') }}"></script>
Infinite Scrollの関数を呼びだす。
無限スクロールしたいページのHTMLに以下を追加します。
<script> var infScroll = new InfiniteScroll( '.scroll_area', { path : ".pagination a[rel=next]", append : ".post" }); </script>
“.pagination a[rel=next]” はLaravelのpaginateが出力するリンクの形に合わせています。
Infinite Scrollの仕様に合わせてHTMLを書く
HTMLは以下のようにします。
$posts にコントローラ側で取得したデータベースのデータ入ってると思ってください。
<section class="scroll_area" data-infinite-scroll='{ "path": ".pagination a[rel=next]", "append": ".post" }' > @foreach($posts as $key => $post) <div class="post"> <h3>{{ $post->title }}</h3> <p>{{ $post->text }}</p> </div> @endforeach </section> {{ $posts->links() }}
コントローラでpaginateを取得しビューに渡す。
コントローラ側は以下のようにします。
はいどん。
public function index() { $data['posts'] = Posts::orderBy('created_at', 'desc') ->simplePaginate(10); return view('index', $data); }
これで無限スクロールが動くようになります。
simplePaginate()を使い、ビュー側では$posts->links()を呼ぶ事で「次のページ」のリンクが出力されます。
この「次のページ」のリンクをInfinite Scrollが読み取り、続きのコンテンツをドキュメントに追加してくれます。
以上、参考になると嬉しいです。
コメント/ピンバック