Html5 jQuery滑动动态加载更多数据功能实现Demo
2016-08-11 14:04:27 By: shinyuu
分享一套HTML5手机端手指滑动上拉加载更多的代码、Demo是一款通过jquery实现tab切换和上拉加载更多的效果、适用于手机端页面开发、流畅性和动画效果都得到了保障、效果非常不错、下面是Demo的截图
Html5代码
<body ontouchstart="" id="container">
<header class="tabHead">
<span class="active">参与开户<small>（200）</small></span>
<span>提交资料<small>（116）</small></span>
<span>开户成功<small>（10）</small></span>
<b class="border"></b>
</header>
<article class="khfxWarp">
<section class="khfxPane" style="display:block">
</section>
<section class="khfxPane">
</section>
<section class="khfxPane">
</section>
</article>
</body>
引入js和css文件
<link type="text/css" media="all" rel="stylesheet" href="css/style.css" /> <link type="text/css" media="all" rel="stylesheet" href="css/dropload.css"> <script src="lib/jquery-2.2.3.min.js"></script> <script src="lib/dropload.js"></script> <script src="lib/khData.js"></script>
js代码
var dropload = $(´.khfxWarp´).dropload({
scrollArea: window,
domDown: {
domClass: ´dropload-down´,
domRefresh: ´<div class="dropload-refresh">上拉加载更多</div>´,
domLoad: ´<div class="dropload-load"><span class="loading"></span>加载中...</div>´,
domNoData: ´<div class="dropload-noData">已无数据</div>´
},
loadDownFn: function (me) {
setTimeout(function () {
if (tabLoadEndArray[itemIndex]) {
me.resetload();
me.lock();
me.noData();
me.resetload();
return;
}
var result = ´´;
for (var index = 0; index < 10; index ) {
if (tabLenghtArray[itemIndex] > 0) {
tabLenghtArray[itemIndex]--;
} else {
tabLoadEndArray[itemIndex] = true;
break;
}
//TODO 此处省略html拼接代码、可以下载源代码查看
}
$(´.khfxPane´).eq(itemIndex).append(result);
me.resetload();
}, 500);
}
});
html5 滑动加载数据实现源代码下载链接: html5滑动加载更多 密码: az53
若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力
想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）
或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）
如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教
为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛
