我想在列出所有帖子的博客页面上使用django无限滚动,我按照指南进行操作,但是出现问题,并且确实出现了,并且它们仅显示了视图BUT中指定的数量,滚动没有工作,我需要点击更多按钮以查看下一页
模型
class Post(models.Model):
title = models.CharField(max_length = 140)
slug = models.SlugField(max_length=40, blank=True)
image = models.ImageField(upload_to="media", blank=True)
body = RichTextField(config_name='default')
date = models.DateField()
#sites = models.ManyToManyField(Site)
sites = models.ForeignKey(Site,null=True, on_delete=models.CASCADE)
def __str__(self):
return self.slug
def approved_comments(self):
return self.comments.filter(approved_comment=True)
url
url(r'^$', views.listingPost, name='blog'),
视图
def listingPost(request):
post_list = Post.objects.all().order_by("-date")
page = request.GET.get('page', 1)
paginator = Paginator(post_list, 6)
try:
post = paginator.page(page)
except PageNotAnInteger:
post = paginator.page(1)
except EmptyPage:
post = paginator.page(paginator.num_pages)
return render(request, 'blog/blog.html', {'post': post})
在HTML中
.infinite-item, .loading {
margin-bottom: 5px;
background-color: #1eaedb;
color: #fff;
text-align: center;
padding: 25px 0;
}
.loading {
background-color: #333;
<div class="infinite-container waypoint">
{% for post in post %}
<div class="infinite-item">{{ post.title }}</div>
{% endfor %}
</div>
<div class="loading" style="display: none;">
Loading...
</div>
{% if post.has_next %}
<a class="infinite-more-link" href="?page={{ post.next_page_number }}">More</a>
{% endif %}
<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>
<script>
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0]
});
</script>