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后端学习之路!