iscroll.js 移动端上拉加载，下拉刷新功能实现

如下图所示，我需要做一个上拉加载，下拉刷新的功能：

            

首先在 html 中引用这个插件：

然后插入我们的数据：

    

        

            
刷新数据
            
（这里是数据列表，是很多
，我在下面的 alist_temp 模板里填充）
            
加载更多
        
    

注意：

1、上面定义了 id="wrapper"，这是必须的。

2、iscroll 只滚动 wrapper 里的第一个子元素，所以我们用一个

把他们包起来。

我在本例中加入了上拉和下拉的动效，分别用 refresh_box 和 load_box 来表现。

其 css 代码如下：

.wrapper{ position:absolute; z-index:1; top:60px; bottom:0; left:0; width:100%; overflow:hidden;}
.wrapper .scroller{ position:absolute; z-index:1; width:100%; -webkit-transform:translateZ(0); transform: translateZ(0);}

@-webkit-keyframes refresh-icon {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}
.ani_box{}
.ani_box .refresh_box{ width:100%; height:30px; line-height:30px; text-align:center; overflow:hidden; margin-top:-30px; color:#999;}
.ani_box .refresh_box span{ display:inline-block;}
.ani_box .refresh_box i{ width:30px; height:30px; vertical-align:top; text-align:center; line-height:30px; -webkit-transform:rotate(0deg); transform:rotate(0deg);}
.ani_box .refresh_box.on i{ -webkit-animation:refresh-icon 800ms linear infinite;animation:refresh-icon 800ms linear infinite;}
.ani_box .load_box{ width:100%; height:30px; line-height:30px; text-align:center; overflow:hidden; margin-bottom:-30px; color:#999;}
.ani_box .load_box span{ display:inline-block;}
.ani_box .load_box i{ width:30px; height:30px; vertical-align:top; text-align:center; line-height:30px; -webkit-transform:rotate(180deg); transform:rotate(180deg);}
.ani_box .load_box.on i{ -webkit-transform:rotate(0deg); transform:rotate(0deg);}

然后 js 的写法：

(function () {
    var myscroll = null,
        $wrapper = $("#wrapper");
    var $list = $("#list"),
        list_temp = $("#alist_temp").html(),  //填充数据的模板
        page = 1;

    // 初始化 iscroll
    var initScroll = function () {
        var nscroll = new iScroll("wrapper", {
            hScrollbar: false,
            vScrollbar: true,
            fadeScrollbar: true,
            onScrollMove: function () {   //拉动页面
                // 刷新和加载更多
                if (this.y > 45) {
                    $(".refresh_box").addClass("on");
                }else{
                    $(".refresh_box").removeClass("on");
                }
                if (this.y <= (this.maxScrollY - 45)) {
                    $(".load_box").addClass("on");
                }else{
                    $(".load_box").removeClass("on");
                }
            },
            onScrollEnd: function () {  //拉动页面停止
                myscroll && myscroll.refresh();
                if ($(".refresh_box").hasClass("on")) {
                    getList(0);  //下拉刷新
                }
                if ($(".load_box").hasClass("on") && !$(".load_box").hasClass("hide")) {
                    getList(1);  //上拉加载
                }
                $(".refresh_box").removeClass("on");
                $(".load_box").removeClass("on");
            }
        });
        return nscroll;
    }
    
    var getList = function(npage, callback){
        if(npage == 0){
            page = 1;
        }else{
            page++;
        }
        $.ajaxEx({
            type: 'get',
            url: '/activity/list-data',
            data:{
                p: page
            },
            success: function (data) {
                if(data.error_code === 0){
                    if(data.data.count == 0){
                        $list.html("
暂无活动我们的征程是星辰大海
快来加入！
");
                        $(".load_box").addClass("hide");
                    }else{
                        var ndata = {
                            list: data.data.list
                        }
                        if(npage == 0){
                            $list.html(template(list_temp, ndata));   //这里是模板套数据
                        }else{
                            $list.append(template(list_temp, ndata));  //这里是模板套数据
                        }
                        myscroll && myscroll.refresh();
                        if($("#list li").length >= parseInt(data.data.count)){
                            $(".load_box").addClass("hide");
                        }else{
                            $(".load_box").removeClass("hide");
                        }    
                    }
                }else{
                    $.message.show(data.errmsg);
                }
            }
        })
    }
    var init = function () {
        myscroll = initScroll();
        getList(0);
    }
    init();
})()

到此为止，这个功能就完成了。