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 EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
详解vue-router基本使用
Apr 18 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 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下使用SMTP发邮件的代码
2008/01/10 PHP
PHP 数字左侧自动补0
2008/03/31 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
举例详解Python中yield生成器的用法
2015/08/05 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
Python环境变量设置方法
2016/08/28 Python
python实现批量监控网站
2016/09/09 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
python 项目目录结构设置
2020/02/14 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
编程输出如下图形
2013/11/24 面试题
货代行业个人求职简历的自我评价
2013/10/22 职场文书
保护环境的建议书
2014/03/12 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
二年级作文之动物作文
2019/11/13 职场文书
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python