18. 离职原因：让 BOSS 学习“滚动加载”这一名词

Posted 2023-01-04 梦想橡皮擦

“小乔啊，咱们网站要做一个往下扒拉一下，就刷新的效果”，BOSS 说
”老板，这个应该叫滚动加载，你得学习一下技术名词啊“
”明天咱们公司要向社会输送1个人才，我看你行“

本篇博客是 爬虫训练场项目第18课，专栏清单查阅地址 pachong.vip

文章目录

• • 调用滚动加载 - infinite-scroll
  • 完善 Python Flask 代码
  • 补齐最后的JS代码
  • 案例总结

调用滚动加载 - infinite-scroll

Bootstrap 5 没有内置的滚动加载功能，但是你可以使用第三方 javascript 库来实现这个效果。例如，你可以使用著名的插件 "infinite-scroll"。

<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>

Infinite Scroll 是一个轻量级、易于使用的 JavaScript 库，它可以帮助你在页面上添加滚动加载功能。

接下来在需要滚动加载的元素上添加 data-infinite-scroll 属性：

<div data-infinite-scroll>
  <!-- Your content here -->
</div>

最后初始化插件。

const infiniteScroll = new InfiniteScroll( '.container', 
  // options
  path: '.pagination__next',  // 设置加载下一页的链接的选择器
  append: '.post',  // 设置加载的内容的选择器
  history: false,  // 设置是否保存历史记录
);

以上代码请在 templates/school/pulltorefresh.html 进行实现。

完善 Python Flask 代码

打开 school/index.py 文件，在其中新增加 pull_refresh() 视图函数，然后输入如下代码

@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)

上述方法在后续滚动加载时，会被重复调用，这里需要特别注意，回到前端页面，补齐页面首次渲染逻辑。

<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>

除此之外，我们需要增加一个滚动加载状态区 HTML 源码，如下所示。

<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="pagination">
    <a class="pagination__next" href="/ss/pr?page=pagination.next_page">下一页数据</a>
</p>

上述代码中需要特别注意 href 属性，需要为其复制下一页数据值。

补齐最后的JS代码

本案例最后一个步骤时补齐JS代码，经过反复测试 ，infinite-scroll 插件的引入和使用需要在 DOM 对象之后，代码如下。

<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>

其中 infinite-scroll 插件被实例化的时候，需要重点掌握其各参数含义，罗列如下。

• path：设置加载下一页的链接的选择器，默认为 ".next"。
• append：设置加载的内容的选择器，默认为 "null"。
• history：设置是否保存历史记录，默认为 “true”。
• scrollThreshold：设置距离底部多少距离时加载下一页，默认为 “200”。
• elementScroll：设置滚动元素的选择器，默认为 “window”。
• status：设置是否在加载过程中显示状态信息，默认为 “null”。
• statusMethod：设置状态信息的显示方式，可以是 “replace” 或 “append”，默认为 “replace”。
• statusEvent：设置状态信息的显示事件，可以是 “scroll” 或 “request”，默认为 “scroll”。
• historyTitle：设置是否更新标题，默认为 “true”。
• responseType：设置服务器返回的数据格式，可以是 “document” 或 “text”，默认为 “document”。
• debug：设置是否启用调试模式，默认为 “false”。

如果希望了解插件细节，还是建议查阅官方文档：https://infinite-scroll.com/

案例总结

到此为止，你已经完成了滚动加载案例，效果查阅可以参考 爬虫训练场，页面每次滚动到底部，都会加载一个新的 HTML 页面，并追加到页面中（这一点未来我们还会进行调整，修改为JSON格式数据）

在很多站点中，存在另一种滚动加载情况，即点击加载更多，实现代码如下所示，修改 school/pulltorefresh.html 文件，添加如下代码。

<p class="text-center">
    <button class="btn btn-primary view-more-button">加载更多</button>
</p>
<script type="text/javascript">
const infiniteScroll = new InfiniteScroll( '.container', 
  // options
  path: '.pagination__next',  // 设置加载下一页的链接的选择器
  append: '.row',  // 设置加载的内容的选择器
  hideNav: '.pagination',
  status:'.scroller-status',
  button: '.view-more-button',
  scrollThreshold: false,

);

</script>

本案例到此结束，已更新到 爬虫训练场 欢迎大家访问学习。
项目同步到代码仓库 https://gitcode.net/hihell/spider_playground

📢📢📢📢📢📢
💗 你正在阅读 【梦想橡皮擦】 的博客
👍 阅读完毕，可以点点小手赞一下
🌻 发现错误，直接评论区中指正吧
📆 橡皮擦的第 815 篇原创博客

从订购之日起，案例 5 年内保证更新

• ⭐️ Python 爬虫 120，点击订购 ⭐️
• ⭐️ 爬虫 100 例教程，点击订购 ⭐️