[Ruby on Rails] Unendliches Scrollen mit Gem Kaminari und Jscroll

Entwicklungsumgebung

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

fließen

Einführung von 1 Edelstein 2 Einführung von jscroll 3 Bearbeiten Sie den Controller 4 Ansicht bearbeiten Bearbeiten Sie 5 js 6 CSS-Bearbeitung

Einführung von Edelstein

Gemfile

gem 'jquery-rails'
gem 'kaminari'

Terminal

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

app/assets/javascripts/application.js

//=erfordern jquery ← hinzugefügt
//= require jquery_ujs ← hinzugefügt
//= require activestorage
//= require turbolinks
//= require_tree .

Referenz: Kaminari [Ruby on Rails] Paging-Funktion eingeführt

Einführung von jscroll

In ① oder ② einführen.

①https://github.com/pklauzinski/jscroll/tree/master Nach dem Herunterladen der Zip-Datei von diesem GitHub jquery.jscroll.min.js in dist Speichern Sie es unter App / Asset / Javascripts.

(2) Verwenden Sie diese Option, wenn Sie in den Kopf schreiben.

python

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

Beschreiben Sie nach der Einführung von ① oder ② wie folgt.

• // = Bitte beschreiben Sie unter erfordern jquery.

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require jquery.jscroll.min.js ← hinzugefügt
//= require activestorage
//= require turbolinks
//= require_tree .

Controller bearbeiten

Durch Schreiben von .page (params [: page]) .per (20) Zeigt 20 Elemente.

app/controllers/posts_controller.rb

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

Ansicht bearbeiten

Bearbeiten Sie den Klassennamen im div mit 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>

Js bearbeiten

Diesmal beim Scrollen zu den unteren 5% des Bildschirms Versuchen Sie, einen neuen zu laden.

• Bitte verwenden Sie den zuvor angegebenen Klassennamen.

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'
    });
  }
});

CSS bearbeiten

app/assets/stylesheets/application.scss

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

Zusammenfassung

Unendliches Scrollen wird also auch auf Twitter und Instagram verwendet Wenn es viele Anzeigen gibt, sollte diese Funktion eingeführt werden.

Auf Twitter werden auch Technologien und Ideen hochgeladen, die nicht auf Qiita hochgeladen wurden Ich wäre Ihnen dankbar, wenn Sie mir folgen könnten. Klicken Sie hier für Details https://twitter.com/japwork