django - django 的无限滚动在向下滚动时不加载下一页

问题描述

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

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

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

到目前为止我做了什么：

在我的静态文件夹中。我创建了一个文件夹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 %}

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

标签： djangopaginationdjango-templatesdjango-viewsinfinite-scroll

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

django - django 的无限滚动在向下滚动时不加载下一页

问题描述

解决方案

推荐阅读