如何在Rails 6中使用Kaminari無限滾動？

Question

我正在我的項目中尋找 Kaminari 無限滾動的解決方案，但它仍然無法按預期工作。

在我的主頁上有渲染帖子的視圖：

<div class="home_post_tab_content">
    <%if @posts.present?%>
        <div id="home_post_infinite_scroll">
            <%= render @posts %>
        </div>
        <%if @posts.total_count > 10%>
            <div class="home_post_pagination_button" id="home_post_pagination">
                <%= link_to_next_page(@posts, 'Xem thêm', :remote => true) %>
            </div>
        <%end%>
    <%end%>
</div>

控制器：

respond_to do |format|
  format.html {}
  format.js
end

腳本文件：

// Append new data
$("<%=j render @posts %>").appendTo($("#home_post_infinite_scroll"));

// Update pagination link
<% if @posts.last_page? %>
  $('#home_post_pagination').remove();
<% else %>
  $('#home_post_pagination').html("<%=j link_to_next_page(@posts, 'See more', :remote => true) %>");
<% end %>

問：當用戶在頁面末尾（jquery 或 JS...）滾動時，如何觸發下一個按鈕？ 或者，如果有人有另一種無限滾動的解決方案，請告訴我。 非常感謝！

Answer 1

我找到了解決它的解決方案：

<script>
                                $(document).on('turbolinks:load', function() {
                                    $(window).scroll(function() {
                                        var next_url = $("#home_post_pagination a[rel='next']").attr('href');       
                                        if (next_url && ($(window).scrollTop() > ($(document).height() - $(window).height() - 5000))) {         
                                            $('#home_post_pagination').show();
                                            $('#home_post_pagination').html('<a>Loading...</a>');
                                            $.getScript(next_url);
                                            return;
                                        }
                                    });
                                    return $(window).scroll();
                                });
                            </script>

$.getScript(next_url) 將在滾動時觸發下一個按鈕