django 的无限滚动在向下滚动时不加载下一页
Posted
技术标签:
【中文标题】django 的无限滚动在向下滚动时不加载下一页【英文标题】：Infinite scroll with django not loading next pages upon scrolling down 【发布时间】：2019-05-25 03:46:56 【问题描述】：简介：我正在使用这个 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 个帖子。我知道视图很好，因为视图中的打印语句有效，并且仅显示 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 %
我哪里错了。我一次又一次地检查和重新检查代码
【问题讨论】：
浏览器控制台是否有错误显示？ @ShafikurRahmanShaon<div class="infinite-container"> 未在检查器中显示控制台为空白
@ShafikurRahmanShaon 我应该在某事上使用console.log 来查看是否出现错误。我在 Javascript 和 Jquery 上工作有一段时间了，抱歉有任何愚蠢的问题
我会努力的。等一下
【参考方案1】：
在您的 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 %
【讨论】：
其中一条错误信息_____________此站点似乎使用了滚动链接定位效果。这可能不适用于异步平移；请参阅developer.mozilla.org/docs/Mozilla/Performance/… 了解更多详情并加入有关相关工具和功能的讨论！ 但是github代码可以无限滚动，没有任何错误 删除这个<script src="% static 'js/jquery-3.1.1.min.js' %"></script>
不，没有这样做
可能是你犯了一些错误。我测试了相同的 git repo 并且对我来说很好。你检查你的jquery，航点和无限的js。再来一次？【参考方案2】：
view.py
类
class ArticlesView(ListView):
model = Article
paginate_by = 5
context_object_name = 'articles'
template_name = 'blog/articles.html'
定义
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)
【讨论】：
以上是关于django 的无限滚动在向下滚动时不加载下一页的主要内容，如果未能解决你的问题，请参考以下文章
导航到下一页时，Chrome (iOS) 中的奇怪自动滚动/跳转行为