Intro: Я использую это 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 сообщения.Я знаю, что представления хороши, так как оператор print в представлении работает, и он показывает только 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 %}
Где я иду не так.Я проверил и перепроверил код снова и снова
