Django Pyrebase 使用无限滚动从 firebase 检索

问题描述

我对如何最好地解决这个问题有点困惑。我目前正在从 Firebase 中提取数据，并使用带有 jquery 和 waypoints 的 django paginator 来获得无限滚动。

然而，definnovations_view 当前返回数据库中的所有条目。我希望它返回前 5 个，然后滚动加载另一个 5。

我相信我可能需要添加一个监听器，但不确定如何最好地处理它。任何帮助将不胜感激。

views.py

def innovations_view(request):
    db_name = database.child('1aBDytzaM232X_H3tjTuanG8-jxiEn0rg5_pg_cvnbgw')
    object_list = db_name.child('Sheet1').get().val()
    page = request.GET.get('page',1)
    paginator = Paginator(object_list,5)
    try:
        objects = paginator.page(page)
    except PageNotAnInteger:
        objects = paginator.page(1)
    except EmptyPage:
        objects = paginator.page(paginator.num_pages)

    context = {
        "object_list": objects,}
    return render(request,'list.html',context) 

list.html

{% extends 'base.html' %}
{% block content %}
{% load static %}
<div class="container-fluid">
    <div class="row row-cols-1 row-cols-md-3 g-4 infinite-container">
        {% for instance in object_list %}
      <div class="col infinite-item">
        <div class="card h-100">
          <img src="{{ instance.featureimg}}" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">{{ instance.title }}</h5>
            <p class="card-text">{{ instance.summary|truncatewords:20 }}</p>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
      <div class="spinload position-fixed" style="display: none; top:35vh; left:46vw;">
        <div class="spinner-border" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
      </div>
    <div>
        {% if object_list.has_next %}
            <a class="infinite-more-link" href="?page={{ object_list.next_page_number }}">More</a>
        {% endif %}
    </div>
</div>
    <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],offset: 'bottom-in-view',onBeforePageLoad: function () {
                $('.spinload').show();
            },onAfterPageLoad: function () {
                $('.spinload').hide();
            },});
    </script>
{% endblock %}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）