使用環境
Ruby2.6.8
Rails6.1.4
#完成イメージ
TwitterやYoutubeのように、ページ下層部に到達したときに次のページを自動的に読み込む機能の実装
#前提
RailsアプリケーションにjQuueryの導入をしている必要があります。
jQueryの導入をしていないちょ、という方はこちらを参考に。
#処理の流れ
①kaminariのインストール
②jscrollの導入
③ページネーションの実装
④無限スクロールの実装
##①kaminariのインストール
おなじみgemファイルを操作してbundle installするだけです、はい。
最後の行とか、適当な場所に追加しましょう。
gem 'kaminari'
$ -> bundle install
##②jscrollの導入
「view/application.html.erb」など、無限スクロールを実装する箇所のheadに以下の記載をしてください。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script>
##③ページネーションの実装
まずはコントローラで、viewに渡したいデータをDBから取り出します。
def index
@post_data = Post.all.order(created_at: :desc)
@posts = Kaminari.paginate_array(@post_data).page(params[:page]).per(10)
end
これで「@posts」をviewに渡すことができました。次はviewファイルを変更しましょう。
<div class="scroll-list jscroll">
<% @posts.each do |post| %>
<p><%= post.name %></p>
<% end %>
<%= paginate @posts %>
</div>
この「<%= paginate @posts %>」は必ず書くようにしてください。ないとエラーになります。
ここまでの段階でページネーションの実装は完了しました。
最後に今回の目的である無限スクロールを実装しましょう。
##④無限スクロールの実装
無限スクロールは②で導入したjscrollのおかげで以下のように記載することで、実装できます。
$(function() {
$("無限スクロールさせたいクラス名").jscroll(
オプションを記述できます
)
});
③で記述したhtml.erbで無限スクロールを実装する際は以下のように書くこともできます。
var jscrollOption = {
loadingHtml: '読み込み中・・・', //記事読み込み中の表示
autoTrigger: true, // 自動で読み込むか否か、trueで自動、falseでボタンクリックとなる。
padding: 20, // 指定したコンテンツの下かた何pxで読み込むかを指定(autoTrigger: trueの場合のみ)
contentSelector: '.jscroll' // 読み込む範囲の指定
};
$('.jscroll').jscroll(jscrollOption);
以上で無限スクロールの実装が完了します。
たったこれだけでUIは劇的に向上するとp思うので、ぜひ皆さんも無限スクロールを導入してみましょう。
参考記事
https://qiita.com/s_yasunaga/items/ab17424912ee90f853d7
https://since-inc.jp/blog/7813