当前位置: 首页 > 知识库问答 >
问题:

在Django Rest Framework中使用无限滚动?

米子轩
2023-03-14

我正在使用Django REST框架创建REST API。API将提供大量数据,我想在页面上使用无限滚动。我想用Angular作为前端。我不知道如何提供数据,以便不是所有数据都必须发送一次,而是仅在用户向下滚动时发送。

我正在使用序列化程序类-

class CompanySerializer(serializers.ModelSerializer):
    class Meta:
        model = Company
        fields = ('company_name', 'location', 'founded_year')

我不确定如何实现这一点。我应该使用Django无尽分页还是可以使用django-rest框架提供的分页来完成。我也不确定这的前端是如何工作的。这里的Web开发新手,请帮忙。

共有2个答案

邢心水
2023-03-14

你应该试试CursorPagation。我不知道它是否是无限的,但它绝对适用于大集。

薄腾
2023-03-14

创建ListAPIView子类

from rest_framework import pagination, generics

class CompanyPagination(pagination.PageNumberPagination):
    page_size = 20  # the no. of company objects you want to send in one go

# Assume url for this view is /api/v1/companies/
class CompanyListView(generics.ListAPIView):
    queryset = Company.objects.all()
    serializer_class = CompanySerializer
    pagination_class = CompanyPagination

完成后,您可以通过调用http://your_domain.com/api/v1/companies/?page=1,<代码>?page=2将第21家公司分配给第40家公司,以此类推。(不指定页面就像执行页面1一样)

在AngularJS方面,您将维护一些变量,这些变量将保存下一个要获取的页码。现在,您可以将API请求绑定到某个加载更多类型按钮上的click事件,或者可以检测用户是否已滚动到底部,然后执行API请求并获取下一组公司对象。

注:

不必使用页码分页(PageNumberPagination),您甚至可以使用限制偏移分页(LimitOffsetPagination)或光标分页(CursorPagination)来实现您的目标。在此处阅读有关各种分页样式的更多信息

 类似资料:
  • 问题内容: 我正在寻找使用React实现无限滚动的方法。我遇到了react-infinite- scroll ,发现它效率低下,因为它只是将节点添加到DOM中,而不会删除它们。React是否有经过验证的解决方案,可以添加,删除和维护DOM中恒定数量的节点。 这是jsfiddle问题。在这个问题中,我想一次仅在DOM中包含50个元素。当用户上下滚动时,应加载和删除其他文件。由于它的优化算法,我们已经

  • 无限滚动用来在页面滚动到接近底部时加载新内容或进行其他操作。 在底部的无限滚动 你只需在可滚动的容器上添加“infinite-scroll”类,一般是页面滚动区域 - div.content <style type="text/css"> .infinite-scroll-preloader { margin-top:-20px; } </style> <heade

  • 无限滚动用来在页面滚动到接近底部时加载新内容或进行其他操作。 无限滚动HTML结构 你只需在可滚动的容器上添加“infinite-scroll”类,一般是页面滚动区域 - <div class="page-content">: <div class="page"> <div class="page-content infinite-scroll" data-distance="100">

  • 无限滚动 iScroll集成了一套智能缓存系统,它允许对一堆近乎无限的元素的数据进行处理和重用。目前无限滚动还处于早期开发阶段,所以虽然当前版本已经足够稳定,但是还没有做好广泛推广的准备。 具体示例请参考 无限滚动示例 ,并请提交你的建议和报告bug。 作者将会尽可能快的将功能变更的细节添加上来。

  • 滚动至底部时,加载更多数据。 基础用法 在要实现滚动加载的列表上上添加v-infinite-scroll,并赋值相应的加载方法,可实现滚动到底部时自动执行加载方法。 demo <template> <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto"> <li v-for="i in count

  • InfiniteScroll 无限滚动 滚动至底部时,加载更多数据。 基础用法 在要实现滚动加载的列表上上添加v-infinite-scroll,并赋值相应的加载方法,可实现滚动到底部时自动执行加载方法。 demo <template> <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto"> <