SUI下拉刷新和无限滚动后台交互
html代码
<div class="content infinite-scroll infinite-scroll-bottom page-current pull-to-refresh-content"
data-distance="100">
<div class="list-block">
<ul class="list-container">
</ul>
</div>
<!-- 加载提示符 -->
<div class="infinite-scroll-preloader">
<div class="preloader"></div>
</div>
</div>
js代码
$.init();
// 是否正在加载:避免多次调用getdata引起的多次ajax请求
var loading = false;
// 上次加载的序号:处理当前请求第几页数据
var index = 1;
// 每次加载添加多少条目
var itemsPerLoad = 10;
//最大条数
var maxItems;
function addItems(item) {
// 生成新条目的HTML
var html = '';
html += '<li class="item-content"><div class="item-inner"><div class="item-title">车间名字'
+ item.workshopName + '</div></div></li>';
// 添加新条目
$('.infinite-scroll-bottom .list-container').append(html);
}
function get_data(number, lastIndex) {
var header = $("meta[name='_csrf_header']").attr("content");
var token = $("meta[name='_csrf']").attr("content");
// 加载过程
$.ajax({
url : contextPath + '/workshop/queryWorkShopLists.do',
async : true,
type : 'POST',
dataType : 'json',
beforeSend : function(xhr) {
xhr.setRequestHeader(header, token);
},
success : function(data) {
maxItems = data.length;
// 重置加载flag
loading = false;
if (index == 1) {
$('.infinite-scroll-bottom .list-container').html('');
}
index = index + 1;
//预先加载10条
for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
var html = addItems(data[i]);
}
}
});
}
//预先加载20条
get_data(itemsPerLoad, 0);
// 上次加载的序号
var lastIndex = 10;
// 注册'infinite'事件处理函数
$(document).on('infinite', '.infinite-scroll-bottom', function() {
// 如果正在加载,则退出
if (loading)
return;
// 设置flag
loading = true;
// 模拟1s的加载过程
setTimeout(function() {
// 重置加载flag
loading = false;
// 添加新条目
get_data(itemsPerLoad, lastIndex);
// 更新最后加载的序号
lastIndex = $('.list-container li').length;
if (lastIndex >= maxItems) {
// 加载完毕,则注销无限加载事件,以防不必要的加载
$.detachInfiniteScroll($('.infinite-scroll'));
// 删除加载提示符
$('.infinite-scroll-preloader').remove();
return;
}
//容器发生改变,如果是js滚动,需要刷新滚动
$.refreshScroller();
}, 500);
});
$(document).on('refresh', '.pull-to-refresh-content',function(e) {
// 如果正在加载,则退出
if (loading)
return;
// 设置flag
loading = true;
// 重置加载flag
loading = false;
window.location.reload();
$.pullToRefreshDone('.pull-to-refresh-content');
});