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 相关文章推荐
javascript 建设银行登陆键盘
Jun 10 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
动态加载js文件简单示例
Apr 21 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
vue实现购物车列表
Jun 30 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
Javascript复制实例详解
2016/01/28 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
Python函数式编程指南(四):生成器详解
2015/06/24 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
中软国际Java程序员机试题
2012/08/19 面试题
大学校园毕业自我鉴定
2014/01/15 职场文书
师德师风演讲稿
2014/05/05 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
大班下学期个人总结
2015/02/13 职场文书
张思德观后感
2015/06/09 职场文书
教师节简报
2015/07/20 职场文书
教师网络培训心得体会
2016/01/09 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers