[Ruby on Rails] Défilement infini à l'aide de gem kaminari et jscroll

Environnement de développement

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

couler

Présentation de 1 gemme 2 Introduction de jscroll 3 Modifier le contrôleur 4 Modifier la vue Modifier 5 js 6 édition CSS

Introduction de gemme

Gemfile

gem 'jquery-rails'
gem 'kaminari'

Terminal

$ bundle install
$ rails g kaminari:config
$ rails g kaminari:views default

app/assets/javascripts/application.js

//=nécessite jquery ← ajouté
//= require jquery_ujs ← ajouté
//= require activestorage
//= require turbolinks
//= require_tree .

Référence: kaminari [Ruby on Rails] Fonction de pagination introduite

Introduction de jscroll

Introduisez en ① ou ②.

①https://github.com/pklauzinski/jscroll/tree/master Après avoir téléchargé le fichier zip depuis ce GitHub, jquery.jscroll.min.js dans dist Enregistrez-le sous app / asset / javascripts.

(2) Utilisez ceci pour écrire dans la tête.

python

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script>

Après avoir introduit ① ou ②, décrivez comme suit.

• // = Veuillez décrire sous require jquery.

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require jquery.jscroll.min.js ← ajouté
//= require activestorage
//= require turbolinks
//= require_tree .

Édition du contrôleur

En écrivant .page (params [: page]) .per (20) Affiche 20 éléments.

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  def index
    @posts = Post.page(params[:page]).per(20)
  end
end

Modifier vue

Modifiez le nom de la classe dans le div avec jQuery.

erb:app/viws/posts/index.html.erb

<div class="scroll-list jscroll">
  <% @posts.each do |post| %>
    <span><%= post.post_title %></span>
  <% end %>
  <%= paginate @posts %>
</div>

Édition de js

Cette fois, lors du défilement vers les 5% inférieurs de l'écran Essayez d'en charger un nouveau.

• Veuillez utiliser le nom de classe que vous avez spécifié précédemment.

app/assets/javascripts/application.js

$(window).on('scroll', function() {
  scrollHeight = $(document).height();
  scrollPosition = $(window).height() + $(window).scrollTop();
  if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
    $('.jscroll').jscroll({
      contentSelector: '.scroll-list',
      nextSelector: 'span.next:last a'
    });
  }
});

Modifier le CSS

app/assets/stylesheets/application.scss

nav.pagination {
  display: none;
}
.scroll-list {
  padding: 0;
}

Résumé

Le défilement infini est également utilisé sur Twitter et Instagram, donc S'il y a de nombreux affichages, c'est une fonction qu'il faut introduire.

De plus, sur Twitter, les technologies et les idées qui n'ont pas été téléchargées sur Qiita sont également téléchargées, donc Je vous serais reconnaissant si vous pouviez me suivre. Cliquez ici pour plus de détails https://twitter.com/japwork