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 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 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安装全攻略:APACHE
2006/10/09 PHP
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
php实现源代码加密的方法
2015/07/11 PHP
重载toString实现JS HashMap分析
2011/03/13 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
python paramiko模块学习分享
2017/08/23 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
python标准库OS模块详解
2020/03/10 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
Java语言程序设计测试题选择题部分
2014/04/03 面试题
总经理秘书的岗位职责
2013/12/27 职场文书
安全教育培训心得体会
2016/01/15 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
python内置进制转换函数的操作
2021/06/02 Python