Create an infinite scroll with Infinite Scroll and kaminari

Complete system

2021-01-17 (2).png

Development environment

rails 6.0.2
ubuntu(wsl)
InfiniteScroll 4.0.1

Advance preparation

--Post list --Demo data of post list --Introduction of kaminari

procedure

Introduction of infinite-scroll

From here Please download. You can also use a CDN. I put it in vendor/assets/javascripts /. (The place can be anywhere.) An error occurred if the reading location here was different. I think it's a good idea to put it directly under // = require_tree ..

application.js


//= require infinite-scroll.pkgd.min

Implemented infinite scrolling

talk.js


$(document).on('turbolinks:load', function () {
  if ($("nav ul.pagination a[rel=next]").length) {
    $('.talk-cards').infiniteScroll({
      path: "nav ul.pagination a[rel=next]",
      append: ".talk-cards .card-index",
      hideNav: "nav ul.pagination",
      history: false,
      scrollThreshold: false,
      button: ".loadmore-btn",
      status: ".page-load-status",
    });
  };
});

I think it's best to look at the Official Site, but I'll explain the options. path: Specify the URL of the next page to load (required) append: Specify the element to be added in the contents of the next page read. If you make a mistake here, the layout will collapse. history: Change the url and keep the history. If false, it will be a fixed url. hideNav: Specify the navigation to hide. scrollThreshold: Does scrolling automatically load? If false, it will not be read. button: Specify the button element to load the page. status: Specify what to display during reading or after reading all.

Partial template and post list view

Please refer to here for css.

talks/_infinitescroll.html.slim


.loadmore-btn-wrapper.p-0.d-flex
  button.loadmore-btn.btn.active.mx-auto Show more
.page-load-status style="display: none"
  .infinite-scroll-request
    .loader-ellips
      span.loader-ellips__dot
      span.loader-ellips__dot
      span.loader-ellips__dot
      span.loader-ellips__dot

talks/index.html.slim


.talk-cards
  - @talks.each do |talk|
    .card.mx-auto.card-index
      .card-body
        .card-title.text-muted.user-info
        #abridgement
          = link_to simple_format(h(talk.content), {}, sanitize: false, wrapper_tag: "div"), talk
  = paginate @talks
  = render "infinitescroll"

At the end

If you make a mistake, please make an edit request or comment. If that doesn't work, try your best with developer tools.

References

Recommended Posts

Create an infinite scroll with Infinite Scroll and kaminari
Create an EC site with Rails5 ④ ~ Header and footer ~
Maybe it works! Create an image with Docker and share it!
Create an immutable class with JAVA
Create an app with Spring Boot 2
Create pagination function with Rails Kaminari
Create an excel file with poi
Create an app with Spring Boot
[Java] Create an executable module with Gradle
Create an or search function with Ransack.
Create an iOS shortcut app and quickly open the key with NFC
Create an EC site with Rails5 ③-Set model associations and other things-
Problems and workarounds that create an unusually large runtime with jlink in openjdk
Create an RSA encryption-enabled JSON API with wicket
Create jupyter notebook with Docker and run ruby
Create an ARM-cpu environment with qemu on mac and run java [Result → Failure]
Create an EC site with Rails5 ⑤ ~ Customer model ~
Create an Annotator that uses kuromoji with NLP4J [007]
[Swift] Create an image selection UI with PhotoKit
Create an EC site with Rails 5 ⑩ ~ Create an order function ~
Create an HTTPS file server for development with ring-jetty-adapter
Create an EC site with Rails5 ⑦ ~ Address, Genre model ~
Create an EC site with Rails 5 ⑨ ~ Create a cart function ~
Create an E2E test environment with Docker x Cypress
Create a user with an empty password on CentOS7
Create an EC site with Rails5 ⑥ ~ seed data input ~
Create a Service with an empty model Liferay 7.0 / DXP
Try create with Trailblazer
[Rails] Create an application
Create a blog with Jekyll and GitHub Pages @ Theme setting
Create an AWS IoT EduKit development environment with Ubuntu 20.04 + VirtualBox 6.1
Getting started with Java and creating an AsciiDoc editor with JavaFX
[Rails] Create an email sending function with ActionMailer (complete version)
Create a blog with Jekyll and GitHub Pages @ Initial Settings
Make an Ev3 radio control with JavaFx and leJOS [Part 1]
Create Rails5 and postgresql environment with Docker and make pgadmin available
Building an environment for creating apps with Rails and Vue
[Ruby on Rails] Infinite scrolling using gem kaminari and jscroll
I want a quick test S3. Start minio with docker-compose and create a state with an initial bucket.