下拉加载更多的实现

html

<div id="wrapper">
            <div class="inner">
                    <ul>
                        <li class="clearfix"></li>
                        <li class="clearfix"></li>
                    </ul>
                  <div class="pullUp"></div>
            </div>
</div>

引入插件

  1. iscroll.js
  2. iscroll-probe.js

初始化iscroll

myIscroll = new IScroll('#wrapper', {
        mouseWheel: true,
        scrollbars: true,
        fadeScrollbars: true,
        click: true,
        probeType: 2,
        bounce: true,//边界反弹
        shrinkScrollbars: 'scale',// 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.
    });

加载逻辑


function fnScroll(id,url,callback) {
    var myScroll=myIscroll;
    var pullUp = $(id+" .pullUp");
    var page=1;
    var loadStep = 0;//加载状态0默认,1显示加载状态,2执行加载数据,只有当为0时才能再次加载,这是防止过快拉动刷新
    var flag = 0;//0表示有数据,1表示没有数据
    /*document.addEventListener('touchmove', function (e) {
        e.preventDefault();
    }, false);*/
    myScroll.on("scroll", function () {
        if (loadStep == 0) {
            if (this.y < (this.maxScrollY - 5)) {/*上拉状态*/
                pullUp.show();
                myScroll.refresh();
                pullUp.html('上拉显示更多...');
                pullUp.addClass("loading2");
                loadStep = 1;
            }
        }
    });
    myScroll.on("scrollEnd", function () {
        if (loadStep == 1) {
            if (pullUp.hasClass("loading2")) {/*上拉*/
                pullUp.html("正在加载...");
                loadStep = 2;
                page++;
                pullUpAction(page);
            }
        }
    });
    function pullUpAction(page) {
        window.setTimeout(function () {
            console.log(page);
            pullUp.removeClass("loading2");
            pullUp.html("上拉显示更多");
            loadStep = 0;
            myScroll.refresh();
            pullUp.hide();
            if (flag == 0) {
                $.ajax({
                    url: url,
                    type: "get",
                    data: {pageNo:page,'sn':user.id},
                    success: function (data) { //绑定数据
                        flag = 0;
                        if(data){
                            data = JSON.parse(data);
                            callback(data);
                        }else{
                            pullUp.show();
                            pullUp.html("没有数据...");
                            flag = 1;
                        }
                    }
                })
                flag = 1;
            } else {
                loadStep = 0;
                pullUp.show();
                pullUp.html("没有数据...");
            }
        }, 500);
    }
}

调用fnScroll(id,url,callback)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,099评论 19 139
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,993评论 6 342
  • 五十三:请解释 JavaScript 中 this 是如何工作的。1.方法调用模式当一个函数被保存为一个对象的属性...
    Arno_z阅读 604评论 0 2
  • _liuz阅读 532评论 0 49