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 相关文章推荐
ajax与302响应代码测试
Oct 23 Javascript
jQuery事件用法详解
Oct 06 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 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/10/09 PHP
一个php作的文本留言本的例子(四)
2006/10/09 PHP
php实例分享之二维数组排序
2014/05/15 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
js实现密码强度检验
2017/01/15 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
python模块之paramiko实例代码
2018/01/31 Python
python获取url的返回信息方法
2018/12/17 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Python多进程fork()函数详解
2019/02/22 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
html5 标签
2009/07/16 HTML / CSS
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
会计毕业生求职简历的自我评价
2013/10/20 职场文书
委托书模板
2014/04/04 职场文书
2014年评职称工作总结
2014/11/20 职场文书
2014年教研组工作总结
2014/11/26 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android