您现在的位置是:网站首页 > 心得笔记
上拉加载更多
简介向下滚动浏览器加载更多代码实例
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();上一篇:jquery实现星星评分效果
下一篇:利用jquery制作回车触发时间