下拉加载更多DEMO(js实现)
项目的一个前端页面展示已购买商品时，要求能下拉加载更多。花了点时间研究这个功能，以前没做过。
首先需要给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功能，最后发现其实是个数学问题。最开始看同事写的类似功能的代码式，十分繁琐。当自己总结完这个公式后，思路立刻清晰了。透过现象看本质。
下拉加载更多DEMO(js实现)的更多相关文章
- iscroll.js实现上拉刷新，下拉加载更多，应用技巧项目实战
上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...
- dropload.js下拉加载更多
项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...
- ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...
- jquery实现下拉加载更多
下拉加载更多这种原理很容易想明白,但是不自己写一个简单的,老是不踏实,获取什么高度再哪里获取之类的.于是自己简单写了个,就是页面上有几个div,然后当滚动条拉到某个位置的时候,再继续加载div.顺便又 ...
- H5页面下拉加载更多(实用版)
近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有. 醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件 还可以,但是 ...
- JQ下拉加载更多
<!DOCTYPE=html> <html> <head> <script src="jquery-1.4.2.min.js" type= ...
- 微信小程序实现上拉和下拉加载更多
在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更 ...
- Windows Phone 8.1开发：如何让ListView下拉加载更多？
Windows Phone 8.1开发中使用ListView作为数据呈现载体时,经常需要一个下拉(拇指向上滑动)加载更多的交互操作.如何完成这一操作呢?下面为您阐述. 思路是这样的: 1.在ListV ...
- 集成iscroll 下拉加载更多 jquery插件
一个插件总是经过了数月的沉淀,不断的改进而成的.最初只是为了做个向下滚动,自动加载的插件.随着需求和功能的改进,才有了今天的这个稍算完整的插件. 一.插件主功能: 1.下拉加载 2.页面滚动到底部自动 ...
随机推荐
- Java学习--数组与方法
1. public class MethodDemo01{ public static void main(String args[]){ printInfo() ; // 调用printInfo() ...
- 前端开发 - JavaScript
本节内容 一.如何编写 二.变量 三.数据类型 四.其他 五.语句与异常 六.函数 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScri ...
- 由异常掉电问题---谈xfs文件系统
由异常掉电问题---谈xfs文件系统 本文皆是作者自己的学习总结或感悟(linux环境),如有不对,欢迎提出一起探讨!! 目录结构 一.相关知识 二.问题提出 三.处理方法 四.最终结果 一.相关知识 ...
- 1.mysql安装
Navicat账号:root 密码:weihu 账号:weihu 密码:weihu 1.首先进入的是安装引导界面 2.然后进入的是类型选择界面,这里有3个类型:Typical(典型).Complete ...
- delphi IsIPAdress 非正则表达式验证IP的方法
function IsIPAdress(const Value:String):Boolean; var n,x,i: Integer; Posi:Array[..]of Integer; Oktet ...
- Android-Kotlin-Activity直接的跳转
1.选中应用包名packageName,右键: 2.选中Kotlin: 3.创建Kotlin的Activity完成: 第一个Activity,MainActivity package cn.kotli ...
- Swagger ui测试中的验证 apikey
Swagger ui测试中的验证 apikey 我们使用swagger 用来呈现webapi的接口,除了可以看到接口的说明和参数说明,还可以进行测试.但是我们的接口通常是有验证的,不是随便就能调用的, ...
- Web 前端 注意知识点
一. 前端使用技巧: 1. button的用法.在使用按钮时可以自由在内设置style属性,来改变形态.可以给予type=sbumit提交属性. 2. 各种使用符号: # <!--小于 大于 ...
- MariaDB MyCat实现读写分离(15)
MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可MariaDB的目的是完全兼容MySQL,包括API和命令行,MySQL由于现在闭源了,而能轻松成为MySQ ...
- cad2015卸载/安装失败/如何彻底卸载清除干净cad2015注册表和文件的方法
cad2015提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装cad2015失败提示cad2015安装未完成,某些产品无法安装,也有时候想重新安装cad2015 ...