javascript - Symfony 3 Infinite Scroll for Announce

Question

我有一个有很多公告的网站。

我想为我的公告进行无限滚动加载。

实际上，这就是我的 twig.html 中的内容

{% extends 'base.html.twig' %}
{% block body %}

</br>
        <div class="container">


        <!-- Menu -->

        {% include '::announce/menu.html.twig' %}


        {% for announce in announces|slice(0, 4) %}

        <!-- Detail Announce -->

            {% include '::announce/' ~ game ~ '/preview.html.twig' %}

        {% endfor %}

    </div>

{% endblock %}

我试着添加类似的东西

{% block javascripts %}

 <script type="text/javascript">
        jQuery(document).ready(function($) {
            var count = 2;
            $(window).scroll(function(){
                    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
                       loadArticle(count);
                       count++;
                    }
            });

            function loadArticle(pageNumber){   
                    $('a#inifiniteLoader').show('fast');
                    $.ajax({
                        url: "{{ asset('ajax/ajax.html.twig') }}",
                        type:'POST',
                        data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop',
                        success: function(html){
                            $('a#inifiniteLoader').hide('1000');
                            $("#content").append(html);    // This will be the div where our content will be loaded
                        }
                    });
                return false;
            }

        });

但是每次循环，我都会得到 html 文本，但 twig 不能与我的 ajax/ajax.html.twig 一起使用。

有没有更简单的函数可以在滚动时循环

{% for announce in announces|slice(NBR, NBR+4) %}

或者只是对我之前代码的更正？

谢谢大家

Answer 1

我在这里看到两个问题:

• 你必须渲染你的 Twig 文件，
• 当你有很多公告时，你的机制会很慢。

我们以不同的方式成功开发了连续滚动功能。我们没有一次加载所有文章，但足以填充页面。Ajax 调用是针对 Controller 的方法创建的，下一页作为参数之一。

Controller 的方法调用 repository 以获取正确数量的下一篇文章并将它们返回到渲染的 twig 文件中。