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

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

            

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

<script src="/js/common/iscroll.js"></script>

然后插入我们的数据：

<div class="wrapper transition" id="wrapper">
    <div class="scroller">
        <div class="ani_box">
            <div class="refresh_box"><span><i class="iconfont2 transition floatL">&#xe602;</i>刷新数据</span></div>
            <ul id="list" class="alist">（这里是数据列表，是很多<li></li>，我在下面的 alist_temp 模板里填充）</ul>
            <div class="load_box hide"><span><i class="iconfont2 transition floatL">&#xe601;</i>加载更多</span></div>
        </div>
    </div>
</div>


<script type="text/template" id="alist_temp">
    <% for(var i = 0; i < list.length; i++){ %>
       <li>
           ....
       </li>
    <% } %>
</script>

注意：

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

2、iscroll 只滚动 wrapper 里的第一个子元素，所以我们用一个<div class="scroller"></div>把他们包起来。

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

其 css 代码如下：

.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("<li class='null'><img src='/image/icon_tips_6.png' class='img_tips'><span>暂无活动</span>我们的征程是星辰大海<br>快来加入！</li>");
                        $(".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();
})()

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