jQuery 上拉加载更多

article/2025/9/17 23:33:06

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

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

本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>