js实现滑动到页面底部自动加载更多功能


Posted in Javascript onFebruary 15, 2017

话不多说,请看代码:

//滚动条到页面底部加载更多案例 
$(window).scroll(function(){
 var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度
 var scrollHeight = $(document).height();   //当前页面的总高度
 var clientHeight = $(this).height();    //当前可视的页面高度
 // console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
 if(scrollTop + clientHeight >= scrollHeight){   //距离顶部+当前高度 >=文档总高度 即代表滑动到底部 count++;         //每次滑动count加1
 filterData(serviceTypeId,industryId,cityId,count); //调用筛选方法,count为当前分页数
 }else if(scrollTop<=0){ 
 //滚动条距离顶部的高度小于等于0 TODO
 //alert("下拉刷新,要在这调用啥方法?");
 }
});

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
JS 实现随机验证码功能
Feb 15 #Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 #Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 #Javascript
javascript中apply/call和bind的使用
Feb 15 #Javascript
JS实现图片放大缩小的方法
Feb 15 #Javascript
JavaScript中的编码和解码函数
Feb 15 #Javascript
js date 格式化
Feb 15 #Javascript
You might like
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
如何使用PHP往windows中添加用户
2006/12/06 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Python对字符串实现去重操作的方法示例
2017/08/11 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Python hmac模块使用实例解析
2019/12/24 Python
python小项目之五子棋游戏
2019/12/26 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
Python sorted对list和dict排序
2020/06/09 Python
python openCV自制绘画板
2020/10/27 Python
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
挂科检讨书范文
2014/02/20 职场文书
公证书标准格式
2014/04/10 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
2015年医生个人工作总结
2015/04/25 职场文书