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

【问题标题】：Infinite scroll with django not loading next pages upon scrolling downdjango 的无限滚动在向下滚动时不加载下一页
【发布时间】：2019-05-25 03:46:56
【问题描述】：

简介：我正在使用这个 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 %}

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

【问题讨论】：

浏览器控制台是否有错误显示？
@ShafikurRahmanShaon <div class="infinite-container"> 未在检查器中显示控制台为空白
@ShafikurRahmanShaon 我应该在某事上使用console.log 来查看是否出现错误。我在 Javascript 和 Jquery 上工作有一段时间了，抱歉有任何愚蠢的问题
我会努力的。等一下

标签： django pagination django-templates django-views infinite-scroll

【解决方案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 %}

【讨论】：

其中一条错误信息_____________此站点似乎使用了滚动链接定位效果。这可能不适用于异步平移；请参阅developer.mozilla.org/docs/Mozilla/Performance/… 了解更多详情并加入有关相关工具和功能的讨论！
但是github代码可以无限滚动，没有任何错误
删除这个<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
不，没有这样做
可能是你犯了一些错误。我测试了相同的 git repo 并且对我来说很好。你检查你的jquery，航点和无限的js。再来一次？

【解决方案2】：

view.py

类

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})

【讨论】：