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

Posted 梦想橡皮擦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了18. 离职原因:让 BOSS 学习“滚动加载”这一名词相关的知识,希望对你有一定的参考价值。

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

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

文章目录

调用滚动加载 - 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 年内保证更新

以上是关于18. 离职原因:让 BOSS 学习“滚动加载”这一名词的主要内容,如果未能解决你的问题,请参考以下文章

18年毕业!历经3年到现在的快手架构师,聊聊我的java后端学习之路!

离职的一些感悟

离职的一些感悟

离职一时爽,求职火葬场——教你如何把离职理由说得“清新脱俗”

数据这就是为什么这么多数据科学家离职的原因

XML之父从愤然亚马逊离职,放弃百万年薪,谷歌华为争抢