下拉加载更多的实现

html

引入插件

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)