jQuery 上拉加载更多

上拉加载，当用户浏览到页面底部时候，自动加载下一页的内容

不管是上拉加载还是下拉刷新，其实都离不开一个关键的事件：滚动条滚动事件。

本demo是窗口的滚动条事件，如果需要指定某个元素做上拉加载功能，请手动修改 container 和 content 的参数值，别忘了给 container 元素设置有滚动条的CSS属性。

在线演示地址：http://www.jq22.com/webqd5959

源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery上拉加载</title><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><script type="text/javascript" src="https://mydarling.gitee.io/resource/jQuery/jquery-3.1.1.min.js"></script><style type="text/css">body{padding: 0;margin: 0;font-family: "Helvetica", "Microsoft YaHei", sans-serif;font-size: 14px;color: #333;}.title{padding: 10px;font-size: 18px;}.item{line-height: 40px;padding: 0 10px;border-top: #e5e5e5 solid 1px;}.item:active{background-color: #f3f3f3;}.loading{line-height: 40px;border-top: #e5e5e5 solid 1px;text-align: center;font-size: 12px;color: #999;}</style>
</head>
<body><div class="title">人员列表：</div>
<div id="list"></div>
<div class="loading" id="load">上拉加载更多</div><script type="text/javascript">/* jQuery类级别插件扩展 */$.extend({onReachBottom:function (params,callFn) {if(!params.container || !params.content){console.error('缺失必要的参数');return;}var $container=params.container,$content=params.content,distance=params.distance || 30;$container.scroll(function() {var awayBtm =$content.height() - $container.scrollTop() - $container.height();if(awayBtm<=distance){callFn && callFn();}});}});/* 调用插件 */$.onReachBottom({"container":$(window),  /* 容器对象 */"content":$(document),  /* 内容对象 */"distance":30           /* 触发事件距离，默认30px */},function () {/* 插件回调函数 */getUserList.get();});/* 项目方法 */var getUserList={/* 允许请求 */isGet:true,/* 条数 */rows:20,/* 页码 */page:1,/*获取*/get:function () {if(!this.isGet){return;}/* 关闭请求条件，避免多次调用 */this.isGet=false;/* 缓存 this 对象 */var _self=this;$("#load").html('正在加载');/* 模拟请求 */setTimeout(function () {var strHtml='';for(var i=1;i<=_self.rows;i++){strHtml+='<div class="item">用户：'+(_self.rows*(_self.page-1)+i)+'</div>';}$("#list").append(strHtml);/* 允许重新加载 */$("#load").html('上拉加载更多');_self.isGet=true;_self.page++;},2000);}};/* 初始化模拟数据 */getUserList.get();
</script>
</body>
</html>

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号

jQuery 上拉加载更多相关推荐

jQuery上拉加载更多
<header id="header">首页</header><section id="main"><ul id=& ...
上拉加载 php,php+jquery 上拉加载
var resflow = true,pages =2; var ps=$("#ids").text(); order_code=$("#order_code" ...
上拉加载 php,jquery上拉加载代码及原理
jquery上拉加载更多原理: 其实就是判断下当前滚动条距离底部的距离滚动条距离底部小于一个值时候我们执行加载内容下面上jquery代码://$(window).height() 可视区域高度 ...
Jquery 实现H5页面上拉加载更多
在最新的H5开发项目中,需要开发上拉加载更多的功能,如何实现上拉加载更多,网上有很多插件可以实现,如:mescroll.mui.isScroll等等,最初我也是选择了使用插件,但在使用过程中发现了如果 ...
基于jquery的上拉加载更多
一个简易的基于jquery的上拉加载更多demo,上拉加载的原理就是容器的高度+容器的scrollTop>=容器内容的高度,整个demo还加上了回弹的动效. <!DOCTYPE html& ...
php中手机端ajax上拉加载更多,jQuery手机网页上拉加载更多
手机网页和PC网页都可以使用的上拉加载更多内容,其中LoadingDataFn自己改为ajax加载就可以了var page = 1, //分页码 off_on = false, //分页开关(滚动加载 ...
js实现上拉加载更多
先贴代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
HTML列表的上拉加载更多
只是引用了JQUERY写法 JQUERY请自行下载 <%--Created by IntelliJ IDEA.User: AdministratorDate: 2017/12/27Time: 1 ...
android SwipeRefreshLayout 增加上拉加载更多
2019独角兽企业重金招聘Python工程师标准>>> 大家可能有的没有swipeRefreshLayout这个类,简单说一下,这是v4包里面的,19.1版本的时候就有了,但是当时的 ...

jQuery 上拉加载更多

jQuery 上拉加载更多相关推荐

最新文章

热门文章