Question

我遵循了这个tutorial

除无限滚动部分外，其他功能均正常。

它并没有在滚动时加载更多内容，而是在页面底部放置了一个“更多”链接，单击该链接可以加载更多内容。

这是我的代码：

views.py：

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})

home.html：

<div class="infinite-container">
    {% for number in numbers %}
      <div class="infinite-item">{{ number }}</div>
    {% endfor %}
</div>

{% if page_obj.has_next %}
    <a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}">More</a>
{% endif %}

<div class="loading" style="display: none;">
    Loading...
</div>

<script>
    var infinite = new Waypoint.Infinite({
    element: $('.infinite-container')[0],
    onBeforePageLoad: function () {
        $('.loading').show();
    },
    onAfterPageLoad: function ($items) {
        $('.loading').hide();
    }
    });
</script>

这就是我必须添加到url.py中的内容：

url(r'^$', views.home, name='home'),

不确定是否需要在此处进行更改以适合我的需求。

我认为它是由于home.html中明显的超链接（标题为“更多”）引起的，但是我该如何更改，以便它在到达页面底部时自动添加内容，而不是单击按钮时自动添加内容？ >

用jQuery无限滚动

0 个答案: