iscroll5实现下拉加载更多

1 下载最新的iscroll5,本文版本是5.1.3

2 提取iscroll-probe.js，选择这个文件的原因是我们要给iscroll扩展一个事件，需要用到probeType 属性

3 修改iscroll-probe.js的源码，添加上拉监听事件slideUp (
iscroll 5 源码注释 http://www.ghugo.com/iscroll-5-source/)

4 编辑页面

Html:

"<div id='lookupScrollerWrapper'>"+
    "<div>"+
        "<div>"+
            "<ul data-role='listview' id='assListId0000'></ul>"+
        "</div>"+
        "<div id='lookupScrollerPullUp' style='display:none'>"+
            "<span>上拉加载更多</span>"+
        "</div>"+
    "</div>"+
"</div>"

css:

#lookupScrollerWrapper {
    position: absolute;
    top: 54px;
    bottom: 0px;
    width: 100%;
    overflow: hidden;
}
 
#lookupScrollerPullUp {
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    font-weight: bold;
    color: grey;
    text-shadow: none;
    text-align:center;
    position:absolute;
    width:100%;
    bottom:-40px;
}

js:

lookupScroll = new IScroll('#lookupScrollerWrapper', { probeType: 3, mouseWheel: true, click: true });
         
lookupScroll.on("scroll", function() {
    if(this.maxScrollY - this.y >= 40){
        $("#lookupScrollerPullUp").css("display", "");
    }
});
 
lookupScroll.on("slideUp", function() {
    if(this.maxScrollY - this.y >= 40) {
        this.scrollTo(0, this.maxScrollY-47, 3000, IScroll.utils.ease.back);
        $(this)._associateKey();
    }
});
 
 $('#lookupScrollerWrapper').on('touchmove', function(){
    if(lookupScroll.maxScrollY - lookupScroll.y >= 40){
        $('#lookupScrollerPullUp').html("释放加载更多");
    } 
 });
 
 $('#lookupScrollerWrapper').on('touchend', function(){
    if(lookupScroll.maxScrollY - lookupScroll.y >= 40){
        $('#lookupScrollerPullUp').html("正在加载..");
    } else {
        $('#lookupScrollerPullUp').html("上拉加载更多");
    }
 });