Html
<header class="mui-bar mui-bar-nav">
<span class="mui-title">上拉加载</span>
</header>
<div class="demoList mui-content">
</div>
<section id="main">
<ul id="list_box">上拉加载更多</ul>
</section>
CSS
.content{
background: url(images/body.png);
width: 200px;
height: 200px;
background-size: 100% 100%;
}
JS
1.调用
var TPL = "<div class=\"mui-card-header mui-card-media\">\n" +
"\t\t\t\t<img src=\"images/logo.png\" />\n" +
"\t\t\t\t<div class=\"mui-media-body\">\n" +
"\t\t\t\t\t尼尔森\n" +
"\t\t\t\t\t<p>发表于 2016-06-30 15:30</p> \n" +
"\t\t\t\t\t<div class=\"content\"></div>\n" +
"\t\t\t\t</div>\n" +
"\t\t\t</div>";
var dom = ".demoList";
var len = 10;
loadDatas(len, TPL, dom);
2.封装方法
function loadDatas(len, TPL, dom) {
var page = 1, //分页码
off_on = false, //分页开关
timers = null;
// 首次加载数据
$(document).ready(function() {
loadData(len, TPL, dom);
})
// 参数
// len 每次加载多少条数据
// TPL 加载的模板
// dom 加载数据的Dom
function loadData(len, TPL, dom) {
var str = '';
for(var i = 0; i < len; i++) {
str += TPL;
}
$(dom).append(str);
off_on = true;
}
$(window).scroll(function() {
//当时滚动条离底部60px时开始加载下一页的内容
if(($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
clearTimeout(timers);
timers = setTimeout(function() {
page++;
console.log("第" + page + "页");
loadData(len, TPL, dom);
}, 300);
}
});
}