무한 스크롤과 카미나리로 무한 스크롤 만들기

완성과

개발 환경

rails 6.0.2
ubuntu(wsl)
InfiniteScroll 4.0.1

사전 준비

투고 요약

투고 요약 프레젠테이션 데이터

kaminari 가져오기

단계

infinite-scroll 배포

여기서부터. 다운로드하십시오.
CDN을 사용해도 OK.
나는 나 자신을 vendor/assets/javascripts/ 위에 놓았다.장소는 어디든지 좋습니다.
만약 이곳의 읽기 위치가 다르다면 오류가 발생합니다.
나는 //= require_tree .의 바로 아래에 두는 것이 비교적 좋다고 생각한다.
application.js

//= require infinite-scroll.pkgd.min

무한 스크롤 구현

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",
    });
  };
});

나는 보기사이트 제목가 가장 좋다고 생각하지만, 나는 먼저 옵션을 설명한다.path: 다음 읽을 페이지의 URL 지정(필수)append: 읽을 다음 페이지에 추가할 요소를 지정합니다.이곳을 잘못 알면 배치가 깨진다.history: URL을 변경하고 기록을 보존할지 여부입니다.false는 고정된 URL입니다.hideNav: 숨길 내비게이션을 지정합니다.scrollThreshold: 스크롤을 통해 자동으로 읽는지 여부.false는 읽지 않습니다.button: 페이지를 로드하는 데 사용할 단추 요소를 지정합니다.status: 읽기 중 또는 모두 읽기 후에 표시할 내용을 지정합니다.

일부 템플릿 및 게시물 목록 보기

css 참조여기.
talks/_infinitescroll.html.slim

.loadmore-btn-wrapper.p-0.d-flex
  button.loadmore-btn.btn.active.mx-auto さらに表示
.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
        #省略
          = link_to simple_format(h(talk.content), {}, sanitize: false, wrapper_tag: "div"), talk
  = paginate @talks
  = render "infinitescroll"

끝날 때

오류가 있으면 편집 요청이나 논평을 진행하십시오.
만약 순조롭지 않다면, 개발자 도구를 사용하여 노력하십시오.

참고 문헌

loader-ellips