(swiper+dropload).js實現選項卡下拉加載分頁
阿新 • • 發佈：2018-03-01
result ssi blog 鎖定 fun host -a nts load
//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(); } }); } }; } });
依賴庫: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) {
//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(); } }); } }; } });
(swiper+dropload).js實現選項卡下拉加載分頁