(swiper+dropload).js实现选项卡下拉加载分页
依赖库:swiper.min.js+dropload.min.js
//dropload
var tabIndex = 0;
var tab1LoadEnd = false;
var tab2LoadEnd = false;
var counter = 0;
// 每页展示4个
var num = 10;
var pageStart = 0, pageEnd = 0;
var dropload = $('.swiper-slide').dropload({
scrollArea: window,
autoLoad: true,
loadDownFn: function (me) {
// 加载菜单一的数据
if (tabIndex == 0) {
$.ajax({
type: 'GET',
data: {
token: token,
uid: uid,
type: 0,
pageSize: 10000
},
url: apiHost + 'app/usigns/getinvitedetais',
dataType: 'json',
success: function (data) {
var firstList = '';
counter++;
pageEnd = num * counter;
pageStart = pageEnd - num;
var firResult = data.data.data;
var firArrLen = firResult.length;
if (pageStart <= firArrLen) {
for (var i = pageStart; i < pageEnd; i++) {
firstList += '<li>'
+ '<div class="detail-name fll">' + firResult[i].nickname + '</div>'
+ '<div class="detail-money flr">'
+ '<h3 class="money-top">' + firResult[i].lable + '</h3>'
+ '<span class="time-buttom">' + timeFormat(firResult[i].create_at) + '</span>'
+ '</div>'
+ '</li>';
if ((i + 1) >= firArrLen) {
// 数据加载完
tab1LoadEnd = true;
// 锁定
me.lock();
// 无数据
me.noData();
break;
}
};
};
setTimeout(function () {
$('#successList').append(firstList);
// 每次数据插入，必须重置
me.resetload();
}, 500);
},
error: function (xhr, type) {
alert('啊哦~~网络出现了点问题!');
// 即使加载出错，也得重置
me.resetload();
}
});
} else if (tabIndex == 1) {
me.resetload();
}
}
});
//swiper
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
slideActiveClass: 'swiper-slide-active',
observeParents: true,
observer: true,
initialSlide: 0,//初始索引
paginationBulletRender: function (swiper, index, className) {
if (index == 0) {
return '<li class="' + className + '">成功邀请</li>';
} else if (index == 1) {
return '<li class="' + className + '">邀请奖励</li>';
}
},
onSlideChangeEnd: function (swiper) {
//重置
dropload.resetload();
tabIndex = swiper.activeIndex;
if (swiper.activeIndex == 0) {//成功邀请
// 如果数据没有加载完
if (!tab1LoadEnd) {
// 解锁
dropload.unlock();
dropload.noData(false);
} else {
// 锁定
dropload.lock('down');
dropload.noData();
}
} else if (swiper.activeIndex == 1) {//邀请奖励
if (!tab2LoadEnd) {
// 解锁
dropload.unlock();
dropload.noData(false);
} else {
// 锁定
dropload.lock('down');
dropload.noData();
};
//加载第二条数据
if ($("#inviteList").find("li").length <= 0) {//防止重复加载
$.ajax({
type: 'GET',
data: {
token: token,
uid: uid,
type: 1,
pageSize: 10000
},
url: apiHost + 'app/usigns/getinvitedetais',
dataType: 'json',
success: function (data) {
var secondList = '';
var secResult = data.data.data;
var secArrLen = secResult.length;
for (var i = 0; i < secArrLen; i++) {
secondList += '<li>'
+ '<div class="detail-name fll">' + secResult[i].nickname + '</div>'
+ '<div class="type2">' + secResult[i].lable + '</div>'
+ '<div class="detail-money flr">'
+ '<h3 class="money-top">' + secResult[i].commission + '</h3>'
+ '<span class="time-buttom">' + timeFormat(secResult[i].create_at) + '</span>'
+ '</div>'
+ '</li>'
};
setTimeout(function () {
$('#inviteList').append(secondList);
// 每次数据插入，必须重置
dropload.resetload();
}, 500);
},
error: function (xhr, type) {
alert('啊哦~~网络出现了点问题!');
// 即使加载出错，也得重置
dropload.resetload();
}
});
}
};
}
});
