dropload.js实现下滑加载更多分页功能

 网上找了点例子.但一直遇到问题.下面是结合网上的例子改了点东西.实现的分页功能能.这里提一下我遇到的一个坑.其中css样式可能影响分页的效果.如果遇到不能分页.可以把css样式注释后试一下.如果分页可以了说明css样式有问题(我的分页不能使用的原因是因为css样式中有一个html,body),不多扯.上代码:

js***************************************************需要引入dropload.min.js这个可以到网上下载

<script>
   $(document).ready(function(){
        //加载分页
        load();
    });
    function load() {
            var num = 4;
            var counter1 = 1;
            var dropload = $('.assess').dropload({
            scrollArea:window,
            loadDownFn:function(me){
                // 加载“推荐医生”的数据
                $.ajax({
                    url:'getDAListByUserId?nowpage="+counter1+"pageSize="+num,
                    type: 'GET',
                    success: function (data) {
                        var data = JSON.parse(data)
                        var datas=data.content.content;
                        var html="";
                        var html3 ="";
                        var length=datas.length;
                        if(length==0){
                            me.lock();
                            // 无数据
                            me.noData();
                            me.resetload();
                            if(counter1 ==1){
                                $(".dropload-down").css("display","none");//没有更多数据的文字
                            }
                        }else{


                            $(".dropload-load").show();
                            counter1++;
                            for(var i=0;i<length;i++){
                                var evaluate='';
                                if(datas[i].status==1){
                                    evaluate='<span class="right go" title="'+datas[i].id+'">去评价</span>';
                                    html3= '<ul class="add" title="'+datas[i].id+'">';


                                }else if(datas[i].status==2){
                                    evaluate='<span class="right right2" title="'+datas[i].id+'">已评价</span>';
                                    html3='<ul class="detail" title="'+datas[i].id+'">';
                                }


                                html+='<div class="assess-main">'+
                                        '<p class="time">'+
                                        '<span class="left">'+datas[i].dateCreate+'</span>'+
                                        evaluate+
                                        '</p>'+
                                       html3+
                                        '<li><span>看诊医生：</span><span>'+datas[i].doctorName+'</span><span class="doctor">'+datas[i].doctorTitle+'</span></li>'+
                                        '<li><span>就诊机构：</span><span>'+datas[i].workUnit+'</span></li>'+
                                        '<li><span>就诊人：</span><span>'+datas[i].patientName+'</span></li>'+
                                        '</ul>'+
                                        '</div>'
                                if(length < 4 &&  i ==(length-1)){//表示一页未满已经没有数据
                                    // 锁定
                                    me.lock();
                                    // 无数据
                                    me.noData();
                                    break;
                                }
                            }
                            $(".assess1").append(html)
                           // me.noData();
                            //me.unlock();
                           me.resetload();
                        };
                    },
                    error: function (xhr, type) {
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }
        });
    }
</script>

css*****************************************css需要添加如下代码

/* dropload插件样式 */
.dropload-up,.dropload-down{
    position: relative;
    height: 0;
    overflow: hidden;
    font-size: 12px;
    /* 开启硬件加速 */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}
.dropload-down{
    height: 50px;
}
.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.dropload-load .loading{
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 100%;
    margin: 6px;
    border: 2px solid #666;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rotate 0.75s linear infinite;
    animation: rotate 0.75s linear infinite;
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

后台**************************

后台只需要做分页处理.前端传递的参数是当前页和每页显示的条数两个参数