笔记：基于Iscroll.js 实现的上拉加载~

引入JQUERY 和 ISCROLL.JS即可~

<div id="wrapper">
    <div class="scroller">
        <ul>
            <li>111111111</li>
            
        </ul>
        <div class="more"><i class="pull_icon"></i><span>上拉加载...</span></div>
    </div>
</div>

<script>
    var myscroll = new iScroll("wrapper",{
        onScrollMove:function(){//滚动条开始滚动时
            
            if (this.y<(this.maxScrollY)) {//判断是否上拉；(this.y<(this.maxScrollY)原作这样的写法上拉时太灵敏了，(this.y<(this.maxScrollY)-50，我在后面减了50就会上拉的高一点才开始判断，只是自己需要，这里mark一下
                $('.pull_icon').addClass('flip');//这几个CLASS是原作添加的动画，就没放上来了，根据自己需要写就行了。
                $('.pull_icon').removeClass('loading');
                $('.more span').text('释放加载...');
                
            }else{
                $('.pull_icon').removeClass('flip loading');
                $('.more span').text('上拉加载...')
            }
        },
        onScrollEnd:function(){//松开滚动条后
            if ($('.pull_icon').hasClass('flip')) {
                $('.pull_icon').addClass('loading');
                $('.more span').text('加载中...');
                pullUpAction();//这里调用方法刷新添加节点
            }
            
        },
        onRefresh:function(){//刷新后
            $('.more').removeClass('flip');
            $('.more span').text('上拉加载...');
        }
        
    });
    
    function pullUpAction(){
        setTimeout(function(){
            /*$.ajax({ //这一段是注释了的，测试可用下面append的死数据；
                url:'/json/ay.json',
                type:'get',
                dataType:'json',
                success:function(data){
                    for (var i = 0; i < 5; i++) {
                        $('.scroller ul').append(data);
                    }
                    myscroll.refresh();
                },
                error:function(){
                    console.log('error');
                },
            })*/
            for (var i = 0; i < 5; i++) {
                $('.scroller ul').append("<li>222222</li>");
            }
            myscroll.refresh();
        }, 1000)
    }
    if ($('.scroller').height()<$('#wrapper').height()) {
        $('.more').hide();
        myscroll.destroy();
    }

</script>