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 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
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 之入门篇
2006/12/04 PHP
php 数组使用详解 推荐
2011/06/02 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
js格式化时间的方法
2015/12/18 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
javascript操作cookie
2017/01/17 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python 中文字符串的处理实现代码
2009/10/25 Python
python虚拟环境迁移方法
2019/01/03 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
舞蹈比赛获奖感言
2014/02/04 职场文书
预备党员表决心书
2014/03/11 职场文书
《称象》教学反思
2014/04/25 职场文书
小学国庆节活动总结
2015/03/23 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书