您现在的位置是:网站首页 > 心得笔记
上拉加载更多
简介向下滚动浏览器加载更多代码实例
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制作回车触发时间