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

我在这里可以看到2个问题：

你必须渲染你的树枝文件，
当你发布很多声明时，你的机制会很慢。

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

控制器的方法称为存储库，以获取正确数量的下一篇文章并将其返回到渲染的树枝文件中。

Symfony 3 Infinite Scroll for Announce

1 个答案: