(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 += '
  • '
  • + '
    ' + firResult[i].nickname + '
    '
    + '
    '
    + '

    ' + firResult[i].lable + '

    '
    + '' + timeFormat(firResult[i].create_at) + ''
    + '
    '
    + '';
    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 '
  • 成功邀请
  • ';
    } else if (index == 1) {
    return '
  • 邀请奖励
  • ';
    }
    },
    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 += '
  • '
  • + '
    ' + secResult[i].nickname + '
    '
    + '
    ' + secResult[i].lable + '
    '
    + '
    '
    + '

    ' + secResult[i].commission + '

    '
    + '' + timeFormat(secResult[i].create_at) + ''
    + '
    '
    + ''
    };
    setTimeout(function () {
    $('#inviteList').append(secondList);
    // 每次数据插入,必须重置
    dropload.resetload();
    }, 500);
    },
    error: function (xhr, type) {
    alert('啊哦~~网络出现了点问题!');
    // 即使加载出错,也得重置
    dropload.resetload();
    }
    });
    }
    };
    }
    });

    你可能感兴趣的:((swiper+dropload).js实现选项卡下拉加载分页)