jQuery 上拉加载更多

r囧r小猫 2022-02-14 00:17 319阅读 0赞

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

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

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

在线演示地址：**[http://www.jq22.com/webqd5959][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>

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[http_www.jq22.com_webqd5959]: http://www.jq22.com/webqd5959
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220214/53ad563897654cf59b816819f9fe900c.png