下拉加载更多DEMO(js实现)
来源:互联网 发布:淘宝客服介入流程 编辑:程序博客网 时间:2024/06/08 16:48
项目的一个前端页面展示已购买商品时,要求能下拉加载更多。花了点时间研究这个功能,以前没做过。
首先需要给div加scroll事件,监听滚动条滚动动作。那何时触发加载动作呢?当滚动条滚到底的时候。如何判断滚动条滚到底呢?
当滚动条的高度加上滚动条到div顶部的高度等于div的可滚动高度时,说明滚动条到底部了。公式如下。
this.scrollHeight <= $(this).scrollTop() + $(this).height()
给出一个能跑的demo,需要引入jquery。
<!DOCTYPE=html><html><head><script src="jquery.js" type="text/javascript"></script></head><body><div>下拉加载更多</div> <div class="main" style="height:700px;overflow:auto;"><div class="child" style='border:1px solid red;margin-top:20px;color:grey;height:800px' ></div> </div></body><script type="text/javascript">$(document).ready(function(){$(".main").unbind("scroll").bind("scroll", function(e){var sum = this.scrollHeight;if (sum <= $(this).scrollTop() + $(this).height()) {$(".main").append($(".child").clone());}});});</script></html>
如果等滚动条拉到底部时再加载,会影响用户体验。因为一般动态加载的时候都需要向服务端请求资源,这时需要时间。一个更佳的方式是,当滚动条距离底部一定距离(C)时,就动态加载更多,向服务端请求资源。也就是预加载,预读取。公式如下。
this.scrollHeight - C <= $(this).scrollTop() + $(this).height()
一个js功能,最后发现其实是个数学问题。最开始看同事写的类似功能的代码式,十分繁琐。当自己总结完这个公式后,思路立刻清晰了。透过现象看本质。
4 2
- 下拉加载更多DEMO(js实现)
- 下拉加载更多DEMO(js实现)
- 下拉加载更多DEMO(js实现)
- 移动端下拉加载更多DEMO(纯js实现)
- android listview 下拉加载更多demo
- angularjs实现下拉加载更多
- MaterialRefreshLayout实现下拉刷新,下拉加载更多
- android最基本的lsitvew实现下拉刷新,上拉加载更多的demo
- js 简单的下拉加载更多
- thinkphp5.0+js 手机下拉加载更多
- Vue项目--用iscroll.js+pullToRefresh.js实现上拉加载更多、下拉刷新
- Android ListView实现下拉刷新、加载更多
- 下拉刷新,加载更多的实现
- 自定义ListView控件实现下拉加载更多
- 自定义RecyclerView实现下拉刷新,加载更多
- RecylerView实现下拉到底加载更多数据
- android下拉刷新上拉加载更多通用Demo
- Android Demo 下拉刷新+加载更多+滑动删除
- C# 解决Dictionary不能序列化
- shell调试
- android圆形头像
- Hashtable 源代码
- android
- 下拉加载更多DEMO(js实现)
- ajaxfileupload不支持响应头ContentType为application/json的设置
- Web 目录枚举与遍历漏洞解决
- 深度学习:实际问题解决指南
- CANopen预定义连接集
- 好的文章收藏
- Linux命令
- UML
- Getting the System Version