向下滚动时，django 无限滚动不加载下一页

Question

简介： 我正在使用这个 https://simpleisbetterthancomplex.com/tutorial/2017/03/13/how-to-create-infinite-scroll-with-django.html 来使用 django 添加无限滚动。以防万一有人想要详细代码 Github.It 是一个非常简单的代码

https://github.com/sibtc/simple-infinite-scroll

问题：我一共有8个帖子。我可以在主页上看到 3 个帖子。理想情况下，只要我向下滚动，就会显示更多 3 个帖子。我知道这些视图很好，因为视图中的打印语句有效并且它只显示了 3 个帖子。通常如果加载无限滚动有问题，More link 应该显示。但这并没有表现出来。我哪里错了

What I have done so far:

在我的静态文件夹中。我创建了一个名为 js 的文件夹并在其中添加了 3 个文件
- infinite.min.js、jquery-3.1.1.min.js、jquery.waypoints.min.js
- 我完全从我的文件github中复制了代码

以下是我的看法：

class Homepage(TemplateView):
    template_name = 'home.html'

def get_context_data(self, **kwargs):
    context = super(Homepage, self).get_context_data(**kwargs)
    all_posts = Post.objects.all()
    page = self.request.GET.get('page', 1)
    paginator = Paginator(all_posts, 3)
    try:
        posts = paginator.page(page)
        print(posts)
    except PageNotAnInteger:
        posts = paginator.page(1)
    except EmptyPage:
        posts = paginator.page(paginator.num_pages)
    context['post_list'] = posts
    return context

下面是我的base.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{% block title %} Infinite Scroll{% endblock %}</title>
        <meta name="description" content="{% block metadescription %}{% endblock %}">
        {% load staticfiles %}
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
      <nav class="navbar navbar-default".....> #navbar   

      <div class="container">
         <div>
             {% block body %}
             {% endblock %}
         </div>
             {% include 'footer.html' %}
       </div>


      <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
      <script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
      <script src="{% static 'js/infinite.min.js' %}"></script>
      {% block javascript %}{% endblock %}
</body>
</html>

下面是我的home.html:

{% extends 'base.html' %}
{% load staticfiles %}
{% block javascript %}
  <script>
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],
      onBeforePageLoad: function () {
        $('.loading').show();
      },
      onAfterPageLoad: function ($items) {
        $('.loading').hide();
      }
    });
  </script>
{% endblock %}

{% block body %}
<div class="col-md-6" style="background-color:white;">
    <div class="infinite-container">
        {% for post in post_list %}
            <div class="infinite-item">
                <div class="list-group"....>
            </div>
        {% endfor %}
   </div>

   <div class="loading" style="display: none;">
       Loading...
   </div>

   {% if post_list.has_next %} #I also tried {% if page_obj.hasnext %}
      <a class="infinite-more-link" href="?page={{ post_list.next_page_number }}">More</a>
   {% endif %}
</div>
{% endblock %}

我哪里错了。我已经一次又一次地检查和重新检查代码

Answer 1

在您的 home.html 中，在正文块之后放置以下块

{% block javascript %}
  <script>
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],
      onBeforePageLoad: function () {
        $('.loading').show();
      },
      onAfterPageLoad: function ($items) {
        $('.loading').hide();
      }
    });
  </script>
{% endblock %}

Answer 2

view.py

Class

class ArticlesView(ListView):
    model = Article
    paginate_by = 5
    context_object_name = 'articles'
    template_name = 'blog/articles.html'

防御

def home(request):
    numbers_list = range(1, 1000)
    page = request.GET.get('page', 1)
    paginator = Paginator(numbers_list, 20)
    try:
        numbers = paginator.page(page)
    except PageNotAnInteger:
        numbers = paginator.page(1)
    except EmptyPage:
        numbers = paginator.page(paginator.num_pages)
    return render(request, 'blog/home.html', {'numbers': numbers})

向下滚动时，django 无限滚动不加载下一页

Infinite scroll with django not loading next pages upon scrolling down

django

pagination

django-templates

django-views

infinite-scroll