滚动加载

app/school/index.py

@@ -91,3 +91,11 @@ def ajax_list_school():
     pagination = pagination_object(page)
 
     return jsonify(pagination)
+
+
+@s.route('pr')
+def pull_refresh():
+    page = int(request.args.get("page", 1))
+
+    pagination = pagination_object(page)
+    return render_template('school/pulltorefresh.html', pagination=pagination)

app/templates/index.html

@@ -115,7 +115,27 @@
                 </div>
             </div>
         </div>
-
+        <div class="col mt-2">
+            <div class="card border-info rounded-5 shadow-sm" style="min-height:268px;min-width:300px;">
+                <div class="card-header text-center">
+                    <h4 class="card-title">滚动加载</h4>
+                    <div class="bg-danger text-white rounded p-1"
+                         style="transform: rotate(20deg); position:absolute;right:0;top:0.5rem;">最新更新
+                    </div>
+                </div>
+                <div class="card-body">
+                    <p class="card-text">本案例模拟的滚动加载数据，当使用鼠标滚轮下拉数据到底部时，会自动触发异步函数，调用后台数据。</p>
+                    <p class="card-text text-left">难度：⭐</p>
+                    <p class="card-text">
+                        案例：
+                        <a href="/ss/pr" class="card-link text-success">学校清单</a>
+                    </p>
+                </div>
+                <div class="card-footer text-end">
+                    <a href="#" class="btn btn-primary card-link ">学习博客</a>
+                </div>
+            </div>
+        </div>
     </div>
 
 </div>
@@ -127,9 +147,7 @@
             <div class="card  border-danger rounded-5 shadow-sm" style="min-height:268px;min-width:300px;">
                 <div class="card-header text-center">
                     <h4 class="card-title">UA 参数反爬</h4>
-                    <div class="bg-danger text-white rounded p-1"
-                         style="transform: rotate(20deg); position:absolute;right:0;top:0.5rem;">最新更新
-                    </div>
+
                 </div>
                 <div class="card-body">
                     <p class="card-text">该案例要求爬虫程序构造请求头的时候，必须携带 User-Agent 参数，否则会返回403错误。</p>

app/templates/school/pulltorefresh.html

+{% extends "base.html" %}
+{% block script %}
+
+{% endblock script %}
+
+
+{% block content %}
+<div class="container">
+
+    {% for school in pagination.data_list %}
+    <div class="row mt-3">
+        <div class="col">
+            <div class="d-flex">
+                <div class="flex-shrink-0">
+                    <a href="#">
+                        <img class="rounded-pill img-thumbnail" width="64" height="64" src="{{school.pic}}" alt="">
+                    </a>
+                </div>
+                <div class="flex-grow-1 ms-3">
+                    <h5 class="float-start pe-3">{{school.name}}</h5>
+                    <p class="ms-3">
+                        {% for fea in school.feature.split(',') %}
+                        <span class="badge rounded-pill bg-primary">{{fea}}</span>
+                        {% endfor %}
+                    </p>
+                    <p><em>所在省市：<span class="text-black-50">{{school.province}} -- {{school.city}}</span></em></p>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+
+</div>
+<!-- status elements -->
+<div class="scroller-status" style="display:none;padding-top: 20px;border-top: 1px solid #DDD;text-align: center;color: #777;">
+    <div class="loader-ellips infinite-scroll-request">
+        <span class="loader-ellips__dot"></span>
+        <span class="loader-ellips__dot"></span>
+        <span class="loader-ellips__dot"></span>
+        <span class="loader-ellips__dot"></span>
+    </div>
+    <p class="infinite-scroll-last">数据到底了</p>
+    <p class="infinite-scroll-error">加载失败</p>
+</div>
+
+<!-- pagination has path -->
+<p class="pagination">
+    <a class="pagination__next" href="/ss/pr?page={{pagination.next_page}}">下一页数据</a>
+</p>
+<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
+<script type="text/javascript">
+const infiniteScroll = new InfiniteScroll( '.container', {
+  // options
+  path: '.pagination__next',  // 设置加载下一页的链接的选择器
+  append: '.row',  // 设置加载的内容的选择器
+  history: false,  // 设置是否保存历史记录
+  scrollThreshold:20,// 设置距离底部多少距离时加载下一页，默认为 "200"
+  hideNav: '.pagination',
+  status:'.scroller-status',
+
+});
+
+</script>
+
+{% endblock %}

app/templates/school/pulltorefresh_btn.html

+{% extends "base.html" %}
+{% block script %}
+
+
+{% endblock script %}
+
+
+{% block content %}
+<div class="container">
+
+    {% for school in pagination.data_list %}
+    <div class="row mt-3">
+        <div class="col">
+            <div class="d-flex">
+                <div class="flex-shrink-0">
+                    <a href="#">
+                        <img class="rounded-pill img-thumbnail" width="64" height="64" src="{{school.pic}}" alt="">
+                    </a>
+                </div>
+                <div class="flex-grow-1 ms-3">
+                    <h5 class="float-start pe-3">{{school.name}}</h5>
+                    <p class="ms-3">
+                        {% for fea in school.feature.split(',') %}
+                        <span class="badge rounded-pill bg-primary">{{fea}}</span>
+                        {% endfor %}
+                    </p>
+                    <p><em>所在省市：<span class="text-black-50">{{school.province}} -- {{school.city}}</span></em></p>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+
+</div>
+<!-- status elements -->
+<div class="scroller-status" style="display:none;padding-top: 20px;border-top: 1px solid #DDD;text-align: center;color: #777;">
+    <div class="loader-ellips infinite-scroll-request">
+        <span class="loader-ellips__dot"></span>
+        <span class="loader-ellips__dot"></span>
+        <span class="loader-ellips__dot"></span>
+        <span class="loader-ellips__dot"></span>
+    </div>
+    <p class="infinite-scroll-last">数据到底了</p>
+    <p class="infinite-scroll-error">加载失败</p>
+</div>
+<p class="text-center">
+    <button class="btn btn-primary view-more-button">加载更多</button>
+</p>
+
+<!-- pagination has path -->
+<p class="pagination">
+    <a class="pagination__next" href="/ss/pr?page={{pagination.next_page}}">下一页数据</a>
+</p>
+<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
+<script type="text/javascript">
+const infiniteScroll = new InfiniteScroll( '.container', {
+  // options
+  path: '.pagination__next',  // 设置加载下一页的链接的选择器
+  append: '.row',  // 设置加载的内容的选择器
+  //history: false,  // 设置是否保存历史记录
+  //scrollThreshold:20,// 设置距离底部多少距离时加载下一页，默认为 "200"
+  hideNav: '.pagination',
+  status:'.scroller-status',
+  button: '.view-more-button',
+  scrollThreshold: false,
+
+});
+
+</script>
+
+{% endblock %}