Django Infinite Scroll,所有内容均出现,但没有滚动,只有更多按钮

时间:2018-09-18 16:06:15

标签: django infinite-scroll

我想在列出所有帖子的博客页面上使用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>

0 个答案:

没有答案