jquery-weui 实现滚动加载
通常情况下，移动端列表内容较多的情况下需要分页，滚动加载功能就派上用场了。因为使用频率较高，所以记录下来。下面是代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动加载</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="../assets/lib/weui/weui.min.css">
<link rel="stylesheet" href="../assets/lib/jquery-weui/css/jquery-weui.min.css">
<link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
<div id="container">
<a href="javascript:;" class="weui-cell weui-cell_access j-jump">
<div class="weui-cell__bd">
<ul>
<li><span class="field">姓名:</span><span class="cont">张三</span></li>
<li><span class="field">年龄:</span><span class="cont">20</span></li>
<li><span class="field">爱好:</span><span class="cont">playing</span></li>
<li><span class="field">联系方式:</span><span class="cont">13751275811</span></li>
<li class="ft"><span class="weui-btn weui-btn_plain-default u-btn-link j-link">评价</span></li>
</ul>
</div>
<div class="weui-cell__ft"></div>
</a>
<a href="javascript:;" class="weui-cell weui-cell_access j-jump">
<div class="weui-cell__bd">
<ul>
<li><span class="field">姓名:</span><span class="cont">李四</span></li>
<li><span class="field">年龄:</span><span class="cont">20</span></li>
<li><span class="field">爱好:</span><span class="cont">playing</span></li>
<li><span class="field">联系方式:</span><span class="cont">13751275811</span></li>
<li class="ft"><span class="weui-btn weui-btn_plain-default u-btn-link j-link">评价</span></li>
</ul>
</div>
<div class="weui-cell__ft"></div>
</a>
<a href="javascript:;" class="weui-cell weui-cell_access j-jump">
<div class="weui-cell__bd">
<ul>
<li><span class="field">姓名:</span><span class="cont">赵</span></li>
<li><span class="field">年龄:</span><span class="cont">20</span></li>
<li><span class="field">爱好:</span><span class="cont">playing</span></li>
<li><span class="field">联系方式:</span><span class="cont">13751275811</span></li>
<li class="ft"><span class="weui-btn weui-btn_plain-default u-btn-link j-link">评价</span></li>
</ul>
</div>
<div class="weui-cell__ft"></div>
</a>
<a href="javascript:;" class="weui-cell weui-cell_access j-jump">
<div class="weui-cell__bd">
<ul>
<li><span class="field">姓名:</span><span class="cont">钱</span></li>
<li><span class="field">年龄:</span><span class="cont">20</span></li>
<li><span class="field">爱好:</span><span class="cont">playing</span></li>
<li><span class="field">联系方式:</span><span class="cont">13751275811</span></li>
<li class="ft"><span class="weui-btn weui-btn_plain-default u-btn-link j-link">评价</span></li>
</ul>
</div>
<div class="weui-cell__ft"></div>
</a>
<a href="javascript:;" class="weui-cell weui-cell_access j-jump">
<div class="weui-cell__bd">
<ul>
<li><span class="field">姓名:</span><span class="cont">孙</span></li>
<li><span class="field">年龄:</span><span class="cont">20</span></li>
<li><span class="field">爱好:</span><span class="cont">playing</span></li>
<li><span class="field">联系方式:</span><span class="cont">13751275811</span></li>
<li class="ft"><span class="weui-btn weui-btn_plain-default u-btn-link j-link">评价</span></li>
</ul>
</div>
<div class="weui-cell__ft"></div>
</a>
<a href="javascript:;" class="weui-cell weui-cell_access j-jump">
<div class="weui-cell__bd">
<ul>
<li><span class="field">姓名:</span><span class="cont">李</span></li>
<li><span class="field">年龄:</span><span class="cont">20</span></li>
<li><span class="field">爱好:</span><span class="cont">playing</span></li>
<li><span class="field">联系方式:</span><span class="cont">13751275811</span></li>
<li class="ft"><span class="weui-btn weui-btn_plain-default u-btn-link j-link">评价</span></li>
</ul>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
<div class="weui-loadmore">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加载</span>
</div>
<script src="../assets/lib/jquery/jquery-2.1.4.js"></script>
<script src="../assets/lib/jquery-weui/js/jquery-weui.min.js"></script>
<script src="../assets/lib/fastclick/fastclick.js"></script>
<script>
var loading = false;
var html=$('#container').html();
// 滚动加载
$(document.body).infinite().on("infinite", function() {
if(loading) {
return;
}
loading = true;
//模拟http请求
setTimeout(function(){
$('#container').append(html);
loading = false;
},2000);
// 如果你不需要滚动加载了，比如已经加载完了所有内容，调用 $(document.body).destroyInfinite() 可以销毁插件。
// 之后你可以再次调用 $(document.body).infinite() 来重新初始化.
//下面是真正的http请求
// util.request({
// api: '/api/elderHotelManagement/list',
// data: pagination,
// success: function (response) {
// if(response.success == 1){
// //parseInt(pagination.start/pagination.length) == Math.floor((response.data.recordsFiltered - 1) / pagination.length)
// if(pagination.start + 10 >= response.data.recordsFiltered) {
// // 最后一页
// loading = true;
// $(document.body).destroyInfinite(); //
// $('.weui-loadmore').find('.weui-loading').hide();
// $('.weui-loadmore').find('.weui-loadmore__tips').text('没有更多了...');
// }
// else {
// loading = false;
// pagination.start += 10;
// }
// $('#cont').append(template('tpl-list', { data: response.data }));
// }
// }
// })
});
</script>
</body>
</html>
具体内容可以参考官方文档（http://www.jqweui.cn/extends#infinite
）
