您现在的位置是:网站首页 > 心得笔记

上拉加载更多

盛悦2019-05-05459人围观
简介向下滚动浏览器加载更多代码实例

1、html

<div class="title">人员列表:</div>
<div id="list"></div>
<div class="loading" id="load">上拉加载更多</div>

2、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;
}


3、js

/* 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();