LaravelのpaginateとInfinite Scrollを使い、データベース内のデータを無限スクロールで表示する

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/app.jsに配置します。

resources/js/app.js に以下を追記し、2つのjsを読み込みます。

Infinite Scrollの関数を呼びだす。

無限スクロールしたいページのHTMLに以下を追加します。


".pagination a[rel=next]" はLaravelのpaginateが出力するリンクの形に合わせています。

Infinite Scrollの仕様に合わせてHTMLを書く

HTMLは以下のようにします。

$posts にコントローラ側で取得したデータベースのデータ入ってると思ってください。

コントローラでpaginateを取得しビューに渡す。

コントローラ側は以下のようにします。

はいどん。

これで無限スクロールが動くようになります。

simplePaginate()を使い、ビュー側では$posts->links()を呼ぶ事で「次のページ」のリンクが出力されます。

この「次のページ」のリンクをInfinite Scrollが読み取り、続きのコンテンツをドキュメントに追加してくれます。

以上、参考になると嬉しいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*