后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 Django 实现无限滚动
这篇文章与OnePublish交叉发布
今天我将向你展示如何使用 Django 创建无限分页或无限滚动的快速教程
互联网上有很多与此主题相关的资料，但大多数都没有完整地解释。因此，我将尝试逐步清晰地为您解释。
好了！让我们发射无限滚动的 Django 火箭吧！
我假设你已经创建了你的项目
步骤 1：创建模型
我们将创建一个包含帖子的简单博客。让我们在models.py中创建帖子模型。
from django.db import model
class Post(models.Model):
title = models.CharField(max_length=250)
description = models.TextField()
image = models.FileField(null=True, blank=True)
def __str__(self):
return self.title
不要忘记迁移你的模型:)
第 2 步：创建视图
在views.py中我们将导入ListView，它是一个基于类的视图，它将包含对象列表。
from django.shortcuts import render
from .models import Post
from django.views.generic.list import ListView
class PostsView(ListView):
model = Post
paginate_by = 2
context_object_name = 'posts'
template_name = 'posts.html'
ordering = ['title']
如您所见，我将使用paginate_by属性每次滚动加载 2 篇文章，但您可以根据需要更改其数量。context_object_name属性指定从模板访问的变量名称。提供一个有用的 context_object_name 始终是个好主意。设计模板的同事会感谢您。此外，您可以按标题或发布日期对文章进行排序，但目前我们先按标题排序。
步骤3：URL配置
是时候配置我们的urls.py了，所以让我们先看看代码。
from django.contrib import admin
from django.urls import path
from posts.views import PostsView
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', PostsView.as_view(), name="posts"),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
在基于类的视图中，您必须调用 as_view() 函数才能返回一个可调用的视图，该视图接受请求并返回响应。对于通用视图，它是请求-响应周期的主要入口点。
只需提醒static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)用于提供媒体文件。
步骤 4：Waypoints JS 和模板
Waypoints 是一个小型 jQuery 插件，它可以让您在滚动到某个元素时轻松执行某个功能。
好的！我们先看看代码
<div class="container">
<div class="row infinite-container">
{% for post in posts %}
<div class="col-md-6 infinite-item">
<div class="card mb-4 shadow-sm">
<img class="img-thumbnail" src="{{post.image.url}}"/>
<div class="card-body">
<h5>{{post.title}}</h5>
<p class="card-text">
{{post.description|truncatewords:20}}
</p>
</div>
</div>
</div>
{% endfor %}
</div>
{% if page_obj.has_next %}
<a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}"></a>
{% endif %}
<div class="d-flex justify-content-center" style="display:none;">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<script src="/static/js/jquery-2.2.4.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],
handler: function(direction) {
},
offset: 'bottom-in-view',
onBeforePageLoad: function () {
$('.spinner-border').show();
},
onAfterPageLoad: function () {
$('.spinner-border').hide();
}
});
</script>
这是本教程的重点部分，我们首先要添加jquery-2.2.4.min.js。最好添加 2.2.4 版本的 jQuery，否则会报错。然后添加jquery.waypoints.min.js和infinite.min.js。
您可以直接从 waypoints 的 github repo 获取脚本。
jquery.waypoints.min.js
infinite.min.js
Infinite 的元素选项指的是将用作航点并将获取的项目附加到的所有无限项目的容器。
.infinite-more-link与每个页面上的“下一页”元素匹配。
.infinite-item是一个选择器字符串，它应该与从每个页面中提取并附加到项目容器的各个项目相匹配。
偏移量与常规航点的偏移量选项相同，只是默认值现在是“视图底部”而不是 0。这意味着，默认情况下，当容器底部进入视图时，将加载新项目。
PageLoad 函数用于在帖子加载时显示微调器
任务完成！
你今天学到了一些非常有用的东西，并成功发射了你的无限滚动 Django 火箭！你可以从我的 git 仓库克隆或下载这个项目，别忘了在社交媒体上关注我，加入 Reverse Astronauts 社区！