자동으로 다음 페이지로 마이그레이션

페이지네이션을 구현해 생각하는 것은 최근에는 다음 버튼은 존재하지 않고, 스크롤하면 점점 새로운 상품이나 트윗이 표시되기도 한다는 것이다.

이번에는 그것을 구현한다.
사용하는 것은 gem'kaminari'(페이지 네이션 기능) + 플러그인 "jScroll"(무한 스크롤)이다.

우선 gem 'kaminari'로 페이지 네이션 구현

참고가 되는 페이지는 여기입니다.
【Rails 초보자】페이지 네이션을 구현해 자신 취향에 디자인을 바꾼다

Gemfile

gem 'kaminari'

젬을 추가하면

터미널

$ 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)は１ページ、１つの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