(swiper+dropload).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();

???????????????????}

???????????????});

???????????}

???????};

???}

});