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

}

});

}

};

}

});

原文地址:https://www.cnblogs.com/lpggo/p/8489572.html

时间: 2024-10-30 19:37:23

(swiper+dropload).js实现选项卡下拉加载分页的相关文章

iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼的问题,给点提示 :#wrapper,以及#scroller-content要注意) html如下: <div class="viewport"> <div id="wrapper" class="wrapper"> <

下拉加载更多DEMO(js实现)

项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判断滚动条滚到底呢? 当滚动条的高度加上滚动条到div顶部的高度等于div的可滚动高度时,说明滚动条到底部了.公式如下. [javascript] view plain copy this.scrollHeight <= $(this).scrollTop() + $(this).height() 给

使用dragloader.js插件实现上拉加载/下拉刷新..

在写代码时候有个需求是,在触屏页面,为了加快页面加载速度,案件列表每页展示5条数据: 然后点击更多,展示下一页数据: 但是为了触屏更好的体验,改为往上滑动案件列表,加载下一页数据:就是要实现上拉加载/下拉刷新的效果: 我只用到了 上拉加载: 参考资料:http://blog.csdn.net/xb12369/article/details/39202711 下面是写的demo: html代码: <!DOCTYPE html> <html lang="en"> &

H5页面下拉加载更多(实用版)

近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有.   醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件  还可以,但是有个问题,只能单页使用比较方便.带有tab标签的不推荐使用. 2.自己百度了半天总结出来的一套: <script> document.addEventListener('scroll', watchScroll); var itemIndex = 0; var classid = 10; var

jQuery手机端上拉刷新下拉加载更多页面

<!doctype html> <html> <head> <title>jquery 手机端上拉刷新下拉加载更多页面</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewpost" content="width=device-wi

iscroll5 上拉,下拉 加载数据

我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余正常. 4.只要页面没有 <div id="pullDown"> <div class="pullDownLabel">正在加载中...</div> </div> 这段代码就不会执行下拉加载数据.//没有上拉时候用到的ht

ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前,先把实现的基本原理说一下.当夜幕下拉到底部的时候,js可以判断滚动条的位置,到达底部触发js方法,执行jquery的ajax方法,向后台一般处理程序夜幕ashx文件请求数据源,得到json格式的数据源.然后,遍历json数据源,拼接一个li标签,再填充到页面上去. 首先,我们来做个简单的html页面

下拉加载的实现

HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>下拉加载</title> <script src="jquery.js"></script> </head> <body> <div id="container"> 下拉加载<br/

不依赖任何插件的下拉加载

HTML: 1 <ul id="loading"> 2 <li> 3 ... 4 </li> 5 </ul> 6 <div class="pullUpLabel"> 7 <span>点击加载</span> 8 </div> 其中ul#loading为容器. CSS: /*下拉加载*/ .pullUpLabel { text-align: center; line-heig