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下的keyCode键码值表
Apr 10 Javascript
js的with语句使用方法
Sep 21 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
JS继承用法实例分析
Feb 05 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 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中读取照片exif信息的方法
2014/08/20 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
Python中字符串的常见操作技巧总结
2016/07/28 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
python实现二分查找算法
2017/09/21 Python
git进行版本控制心得详谈
2017/12/10 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
python读取xml文件方法解析
2020/08/04 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
设计模式的基本要素是什么
2014/04/21 面试题
应届生煤化工求职信
2013/10/21 职场文书
大学生毕业自我评价范文分享
2013/11/07 职场文书
创意婚礼策划方案
2014/05/18 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
党性教育心得体会
2014/09/03 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
MongoDB数据库的安装步骤
2021/06/18 MongoDB