上拉加载更多

Html

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

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

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.1

立即下载

上拉加载更多



代码描述：向下滚动浏览器加载更多

当前为窗口级的上拉加载，如果需要为某个元素添加上拉加载功能，将 container 与 content 属性替换为指定的 jquery对象即可。

1

最新

发表评论全部评论

暂时没有评论！

ゞ生活如此多娇0

2021/4/28 17:01:59

好用啊, 找了好久终于找到纯纯的
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

黄河爱浪

相关代码

上拉加载更多

最新