Waypoint.Infinite不是构造函数

问题描述

大家好，我对Django无限滚动分页有疑问。 我解决不了。

home.html

 <div class="infinite-container">
    {% for post_display in post_data %}
    <div class="card infinite-item">
        <div class="card-body">
            {{ post_display }}
        </div>
    </div>
</div>
<script src="{% static 'js/jquery.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();
}
});

view.py

class HomeClassView(ListView):
    model = EssahdisplayModel
    paginate_by = 2
    template_name = "authenticated/home.html"
    context_object_name = 'post_data'

我在控制台上收到此错误：

（索引）：458未捕获的TypeError：Waypoint.Infinite不是构造函数 在（索引）：458 it the line 458 start: var infinite = new Waypoint.Infinite({....

有人知道吗？ 谢谢

解决方法

我实际上仍然遇到相同的问题，但我认为您的问题还有另一个问题。您无需关闭Django for循环。

myAppend <- function(x,values,after=length(x)) {
  if(after < length(x)) stop("after must be at least length(x)")
  c(x,rep(NA,after-length(x)),values)
}

,

推荐使用jquery-2.2.4.min.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>-->

,

<div class="col infinite-container">
  {% for post in posts %}
    <article class="media content-section infinite-item">
      <div class=" col-md-2">
        <img class= "rounded-circle article-img" src="{{ post.author.profile.image.url}}">
      </div>
      <div class="media-body">
        <div class="article-metadata">
          <a class="mr-2" href="{% url 'user-posts' post.author.username %}">@{{ post.author }}</a>
          <small class="text-muted">{{ post.data_posted }}</small>
          </div>
          <div class="col-md-3">
            <h2><a class="article-title" href="{% url 'post-detail' post.id %}">{{ post.title }}</a></h2>
            <p class="article-content">{{ post.content }}</p>
          </div>
        <div class="col-md-7">
          {% if post.header_image%}
            <img src="{{ post.header_image.url }}">
          {%endif%}
        </div>
    </article>
  {% endfor %}
  {%if page_obj.has_next %}
    <a class= "infinite-more-link" href="?page={{ page_obj.next_page_number }}"></a>
  <!--<a class= "btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>-->
  {%endif%}
</div>

<script src="{% static 'blog/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'blog/infinite.min.js' %}"></script>

<script>
  var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],offset: 'bottom-in-view',onBeforePageLoad: function(){

      },onAfterPageLoad:function(){

      }

  })
</script>