如下圖所示，我需要做一個上拉載入，下拉重新整理的功能：

首先在 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();
})()
 

到此為止，這個功能就完成了。