無限スクロール実装 - haayaaa’s diary

Infinite Scrollというライブラリを使って無限スクロールを実装しました。

その際のやり方について書き留めておきます。

以下はInfinite Scrollのリンクです！

infinite-scroll.com

実装にあたってこちらの記事を参考にさせていただきました。

qiita.com

Infinite Scrollの導入

以下のコマンドでyarnを使ってInfinite Scrollをインストールします。

dockerを使っているため、docker-compose run --rm appを頭につけて実行しております。

docker-compose run --rm app yarn add infinite-scroll

その後、jsファイルでInfinite Scrollをrequireしてあげます。

//= require infinite-scroll/dist/infinite-scroll.pkgd.min

Infinite Scrollの実装

Infinite scrollが実行されるようにjavascriptで記述します。

jsファイル

$(function() {
  $('#menus').infiniteScroll({　　　// 監視してほしい範囲のタグのクラス
    path : 'nav.pagination a[rel=next]',  // 次ページのリンク(kaminari使ってる)
    append : '.col-md-6.p-2',  // 読まれたら追加していくタグのクラス
    history: false,  // ページが読まれてもURLを変えない
    prefill: true,  // 一番下まで読まれる前にpathを読み込む
    status: '.page-load-status'  // 読み込み中表示したいタグのクラス
  })
})

viewファイル

  .page-load-status
    .infinite-scroll-request
      | Loading...　　　　// この部分がページ読み込み中に表示される
= paginate @foos       // kaminari使ってページネーションしてる

これでページネーション部分が読まれると無限スクロールが実行されます！

そして次のスクロール部分を読み込み中には 'Loading...' と表示されます。

ミスった場所

しかし！このままだとページネーションがない時にも 'Loading...' が表示されてしまいます。。。

それを防ぐために、以下のように表示する条件を指定してあげました。

(正しいか自信はないですが一応期待した通りになりました)

- unless @foos.include?(@foos_last)　　// ここを追加した
  .page-load-status
    .infinite-scroll-request
      | Loading...
= paginate @foos

@foos_lastはコントローラで@foosの一番最後のインスタンスを代入しております。

def index
 　略
  @foos = Foo.where( 略 )
  @foos_last = @foos.last　　// ここを追加した
  @foos = Kaminari.paginate_array(@foos).page(params[:page]).per(15)
 　略
end

感想

いろんな条件を想定して、どの条件の時も漏れ無くうまく動くようにするのは難しいです。