html
<header class="mui-bar mui-bar-nav">
<span class="mui-title">上拉加载下拉刷新</span>
</header>
<div class="demoList mui-content .mui-scroll-action">
<div class="xiala" style="display: none;">正在刷新</div>
</div>
<section id="main">
<ul id="list_box">上拉加载更多</ul>
</section>
script
var TPL = "<div class=\"lists 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 = 3;
loadDatas(len, TPL, dom);
$('.demoList').on('touchmove', function(e) {
var touch = e.originalEvent.targetTouches[0];
var y = touch.pageY;
if(y < 120) {
$(".xiala").css({
"display": "block"
})
$(".lists").remove();
setTimeout(function() {
loadDatas(len, TPL, dom);
$(".xiala").css({
"display": "none"
})
}, 500)
}
});
// 上拉加载
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);
}
});
}
css
.content {
background: url(images/body.png);
width: 200px;
height: 200px;
background-size: 100% 100%;
}