javascript - 无法用航点计算无限滚动
问题描述
尝试使用 Waypoints 应用无限滚动,但似乎无法正常工作。
base.html
下载并保存在我的文件夹中后,我在我的文件夹中加载了以下脚本static
:
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/infinite.min.js' %}"></script>
然后我的模板中有以下代码从base
:
{% extends "base.html" %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'home/main.css' %}">
{% endblock css %}
{% block content %}
<br>
<div class="container status-update">
<div class="container">
<form>
<div class="input-group-lg">
<input type="text" class="form-control" value="What's new?">
</div>
<br style="height:20px">
<button type="submit" class="btn btn-primary btn-lg" name="button">Post</button>
</form>
</div>
</div>
<br>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #6298bf">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav">
<a class="nav-link active" href="{% url 'home' %}">Activity Feed</a>
<a class="nav-link" href="{% url 'vehicle_updates' %}">Vehicle Updates<span class="sr-only">(current)</span></a>
<a class="nav-link" href="/space.html">Garage Updates</a>
</div>
</div>
</nav>
</div>
<br>
<div class="container">
<div class="primary-segments">
<h2>Activity Updates</h2>
<div class="infinite-container">
{% for post in posts %}
<div class="infinite-item">
<div class="card m-3">
<div class="card-body" style="background-color:#bdcade; padding-bottom:0px">
<div class="media mb-3">
<img src="{{ user.profile.image.url }}" class="d-block ui-w-40 rounded-circle" style="width:40px;height:auto;" alt="">
<div class="media-body ml-3">
<h5 style="color:#ffffff">{{ post.user.first_name }} {{ post.user.last_name }}</h5>
<div class="small text-muted">Yesterday</div>
</div>
</div>
</div>
{% if post.image %}
<img src="{{ post.image.url }}" class="card-img-top" alt="">
{% endif %}
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<p class="card-text">{{ post.content }}</p>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary">Like</button>
<button type="button" class="btn btn-secondary">Comment</button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% if page_obj.has_next %}
<a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}">More</a>
{% endif %}
</div>
</div>
<script type="javascript">
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0]
});
</script>
{% endblock content %}
当我运行服务器并加载页面时,它只在页面底部显示一个“更多”按钮,我可以单击该按钮将我带到下一组对象(在视图中将分页设置为 3)。
当我运行服务器时,它看起来不会在控制台中引发任何错误,所以我不确定下一步该去哪里寻找问题。任何帮助将非常感激。
解决方案
弄清楚了。
将 JS 脚本标签从底部body
向上移动到head
它开始工作。不知道这种位置依赖性。
推荐阅读
- string - 在火花数据框中如何使用scala将字符串类型的日期列转换为日期类型的日期列
- python - 编写“python manage.py makemigrations”时出现一条很长的错误消息,说明语法无效
- sql-server - 导入到文本文件 sql 时,选择的列显示 2 行
- python - 在 python 中检查列表项是否为 mo/dd/yy 格式?
- python - 硒的自定义命令循环?
- c++ - OpenMP 编译错误:“reduction”对“#pragma omp taskloop”无效
- dart - 在飞镖中克隆一个新地图
- intellij-idea - 在 intellij 中固定时缩小标签大小
- sql - 调整存储过程
- python - Pandas:将数据框旋转到每个用户(组)一行