Question

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

我要去哪里错了。我已经检查了一次又一次的代码

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 ArticlesView(ListView):
    model = Article
    paginate_by = 5
    context_object_name = 'articles'
    template_name = 'blog/articles.html'

Def

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的无限滚动在向下滚动时不会加载下一页

2 个答案: