(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();

}

});

}

};

}

});