7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Railsで無限スクロールの導入

Posted at

使用環境
Ruby2.6.8
Rails6.1.4

#完成イメージ
TwitterやYoutubeのように、ページ下層部に到達したときに次のページを自動的に読み込む機能の実装

#前提
RailsアプリケーションにjQuueryの導入をしている必要があります。
jQueryの導入をしていないちょ、という方はこちらを参考に。

#処理の流れ
①kaminariのインストール
②jscrollの導入
③ページネーションの実装
④無限スクロールの実装

##①kaminariのインストール
おなじみgemファイルを操作してbundle installするだけです、はい。
最後の行とか、適当な場所に追加しましょう。

Gemfile
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から取り出します。

posts_controller.rb
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ファイルを変更しましょう。

posts/index.html.erb
<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

7
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?