无限滚动，django在向下滚动时不加载下一页
简介：我用它来添加带有django的无限卷轴。万一有人想在Github上获得详细的代码，这是一个非常简单的代码 问题：我总共有8篇帖子。我可以在我的主页上看到3篇帖子。理想情况下，只要我向下滚动，就会显示3篇以上的帖子。我知道视图很好，因为视图中的print语句起作用，它只显示了3篇文章。通常，如果加载无限滚动时出现问题，应显示无限滚动，django在向下滚动时不加载下一页,django,pagination,django-templates,django-views,infinite-scroll,Django,Pagination,Django Templates,Django Views,Infinite Scroll,简介：我用它来添加带有django的无限卷轴。万一有人想在Github上获得详细的代码，这是一个非常简单的代码 问题：我总共有8篇帖子。我可以在我的主页上看到3篇帖子。理想情况下，只要我向下滚动，就会显示3篇以上的帖子。我知道视图很好，因为视图中的print语句起作用，它只显示了3篇文章。通常，如果加载无限滚动时出现问题，应显示More链接。但这并没有表现出来。我错在哪里 到目前为止我所做的： 在我的静态文件夹中。我制作了一个名为js的文件夹，并在其中添加了3个文件 infinite.mi
More- 在我的静态文件夹中。我制作了一个名为
的文件夹，并在其中添加了3个文件js
，infinite.min.js
，jquery-3.1.1.min.jsjquery.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
<!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>
{% 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 %}
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
<!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>
{% 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 %}
{%block title%}无限滚动{%endblock%}
{%load staticfiles%}
#导航栏
{%block body%}
{%endblock%}
{%include'footer.html%}
{%block javascript%}{%endblock%}
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
<!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>
{% 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 %}
{%extends'base.html%}
{%load staticfiles%}
{%block javascript%}
var infinite=新航路点。无限({
元素：$（'.infinite container'）[0]，
onBeforePageLoad:函数（）{
$（'.loading'）.show（）；
},
onAfterPageLoad:函数（$items）{
$（'.loading'）.hide（）；
}
});
{%endblock%}
{%block body%}
{post_list%}中的post为%
{%endfor%}
加载。。。
{%if post_list.has_next%}我也尝试过{%if page_obj.hasnext%}
{%endif%}
{%endblock%}
在您的
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 %}
{%block javascript%}
var infinite=新航路点。无限({
元素：$（'.infinite container'）[0]，
onBeforePageLoad:函数（）{
$（'.loading'）.show（）；
},
onAfterPageLoad:函数（$items）{
$（'.loading'）.hide（）；
}
});
{%endblock%}
浏览器控制台中是否显示任何错误？@ShafikurRahmanShaon
console.log