zoukankan      html  css  js  c++  java
  • (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();
    }
    });
    }
    };
    }
    });
  • 相关阅读:
    最短路径之spfa
    最短路径之Bellman-Ford——解决负权边
    最短路径之Floyd-Warshall算法
    图上最短路径问题
    它们其实都是图(二分图)
    记忆化结果再利用 进一步探讨递推关系
    leetcode 376. 摆动序列 java
    leetcode 368. 最大整除子集 java
    leetcode 96. 不同的二叉搜索树 java
    leetcode 454. 四数相加 II java
  • 原文地址:https://www.cnblogs.com/lpggo/p/8489572.html
Copyright © 2011-2022 走看看