• (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();
    }
    });
    }
    };
    }
    });
  • 相关阅读:
    android应用框架搭建------BaseActivity
    Android中Application类用法
    Android App框架设计之编写基类BaseActivity
    android Application类的详细介绍
    Linux使用jstat命令查看jvm的GC情况
    cocos2dx怎样设置ios和Android横屏竖屏的几种方法
    网络请求 http get post 一
    Java多线程中wait, notify and notifyAll的使用
    一个人生活,怎样摆脱孤独提升幸福感?
    js控制文本框仅仅能输入中文、英文、数字与指定特殊符号
  • 原文地址:https://www.cnblogs.com/lpggo/p/8489572.html
Copyright © 2020-2023  润新知