Help us understand the problem. What is going on with this article?

【Rails】自動で次のページへ!!jscrollによるページネーションの無限スクロール

Image from Gyazo

自動で次のページに移行

ページネーションを実装して思うことは、最近は次へボタンなんて存在せず、スクロールするとどんどん新しい商品やツイートが表示されたりするということだ。

今回はそれを実装する。
使うのは、gem'kaminari'(ページネーション機能) + プラグイン”jScroll”(無限スクロール)である。

まずはgem'kaminari'でページネーションを実装

参考になるページはここです。
【Rails初心者】ページネーションを実装して自分好みにデザインを変える

Gemfile
gem 'kaminari'

gemを追記したら

ターミナル
$ bundle install

インストールが完了したら、コントローラーに記述する。

products_controller.rb
class UsersController < ApplicationController
  def index
    @products = Product.order(created_at: "DESC").includes(:host).page(params[:page]).per(1)
     #.page(params[:page]).per(1)は1ページ、1つのproductだけ表示の意味
  end
end

次はページネーションの次へ、戻るなどのボタンを表示させる。

index.haml
= render 'shared/main-header'
.container-fluid
  .row.py-5.w-100
    = render 'shared/side'
    .col-8.main
      .jscroll
        = render partial: 'user', collection: @products, as: "product", class: "jscroll"
        .skill-list
          = paginate @products # ここを追加するだけ

これでページネーションの実装完了です。

kaminariは遅いので、加工します。

kaminariは便利ですが、読み込みが10秒ぐらいかかって非常に重い。
だから、記述を変えます。

参考になるサイト:巨大レコードのkaminariページネーションは工夫が必要

products_controller.rb
class UsersController < ApplicationController
  def index
    @products = Product.order(created_at: "DESC").includes(:host).page(params[:page]).without_count.per(1)
    # .without_countを追加しています
  end
end

.without_countを追加することで、本来のkaminariの機能は使えなくなります。
次へボタンと戻るボタンは表示可能です。

index.haml
= render 'shared/main-header'
.container-fluid
  .row.py-5.w-100
    = render 'shared/side'
    .col-8.main
      .jscroll
        = render partial: 'user', collection: @products, as: "product", class: "jscroll"
        .skill-list
          // = paginate @products これを削除して、下記を追加
          = link_to_prev_page @products, '前のページ', class: "prev"
          = link_to_next_page @products, '次のページ', class: "next"

これで戻るボタンと次へボタンを表示させました。
1秒ほどで、ページを開けるようになりましたね!!

では、本題の下にスクロールすると、勝手に次のページに移行するようにしましょう!!

無限スクロール

jScrollのインストール

CDNで追加する場合

スクリプトを読み込ませて簡単に導入しましょう!

application.html.haml
%head
  %script{src: "https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"}

直接JSファイルを導入する場合

jscrollのGithubからダウンロードしよう。

ZIPファイルを解答したら、
jquery.jscroll.min.jsをasset/javascripts配下におきます。

そしたら、jScrollを読み込ませるようにします

assets/javascripts/application.js
//= require jquery.jscroll.min.js 
実はここが失敗が起こりやすい箇所です!!!!

解説します
私は下記のようにしてます

application.js
//= require jquery
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery.jscroll.min.js
//= require popper
//= require bootstrap-sprockets

重要なのはここです。

application.js
//= require jquery
//= require jquery.jscroll.min.js

これだけだとエラーなく利用できます。

エラー
Uncaught TypeError: $(...).jscroll is not a function
// 「.jscrollってイベント処理なんて、知らねえぞええぞゴラアアアアアアア!!」と怒られます。これに苦戦しましたね。

間違えて下記にしてしまうと使えません

失敗例
//= require jquery
//= require jquery.jscroll.min.js
//= require jquery3

//= require jquery と //= require jquery3が入っていて、
エラーが起こるパターンです。
もしも複数入っている場合、片方消しましょう。

jQueryで無限スクロールの処理作成

では続きを進めていきます。
それではjQueryで無限スクロールの処理を作成します。

jscroll用のjs
$(document).on('turbolinks:load', function() {
  $('.jscroll').jscroll({
    // 無限に追加する要素は、どこに入れる?
    contentSelector: '.jscroll', 
    // 次のページにいくためのリンクの場所は? >aタグの指定
    nextSelector: 'a.next',
    // 読み込み中の表示はどうする?
    loadingHtml: '読み込み中'
  });
});

これでdiv.jscrollをスクロールすると.jscrollに次のページの要素を追加するよ。ということになります

詳しいオプションは下記のサイトが参考になります。
無限スクロールのプラグイン「jScroll」の使い方

これで完了です!!
エラーが難しかったですが、原因がわかってよかったです。

参考リンク

kaminari系

【Rails初心者】ページネーションを実装して自分好みにデザインを変える
gem'kaminari'のオプション
参考になるサイト:巨大レコードのkaminariページネーションは工夫が必要

無限スクロール系

kaminari + jscrollを使った無限スクロールの実装
無限スクロールのプラグイン「jScroll」の使い方
Github:jscroll

mylevel
誰よりもわかりやすく端的に説明することが得意です。 記事投稿したらお知らせしますので、ぜひTwitterもフォローしてください きっとあなたの役にたちます
https://twitter.com/nousi201
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした