Html5 jQuery滑动动态加载更多数据功能实现Demo
2016-08-11 14:04:27  By: dwtedx

分享一套HTML5手机端手指滑动上拉加载更多的代码、Demo是一款通过jquery实现tab切换和上拉加载更多的效果、适用于手机端页面开发、流畅性和动画效果都得到了保障、效果非常不错、下面是Demo的截图

html5 滑动加载数据


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的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+