集成iscroll 下拉加載更多 jquery插件

一個插件總是經過了數月的沉淀，不斷的改進而成的。最初只是為了做個向下滾動，自動加載的插件。隨着需求和功能的改進，才有了今天的這個稍算完整的插件。

一、插件主功能：

1、下拉加載

2、頁面滾動到底部自動加載

二、插件集成組件：

iscroll,imgLoad

其中iscroll修復了在ios9.0以上，滑動時觸摸屏幕會出現閃屏的情況。

三、插件適用：移動端，為解決在ios下面適用div滾動，不流暢。，移動端的滾動到底部自動加載數據。

四、插件API

1、配置

{
    url: null, //列表的鏈接地址
    ajaxOps: { //鏈接請求的ajax配置
        type: "get",
        data: {},
        dataType: "json",
        async: true
    },
    callback: function() {}, //請求完成之后的回調函數，可在此函數中追加列表
    curAjaxId: null, //tab頁面切換時，保證當前容器在同一時間內，只存在一個請求
    loadType: "load", //默認滾動到底部自動加載，值有："uplaod"下拉加載，"download"上拉加載
    isShowEmpty: true, //沒有列表記錄時，是否顯示空記錄頁面。為false時，沒有數據記錄則顯示沒有更多
    offsetHeight: 0 //頁面高度減去此參數，就是列表容器的高度
};    

2、對外接口

//重新設置ajax請求參數，包括url等
$.fn.setParam = function(values) {
    if (this[0] && this[0].t) {
        return this[0].t.setParam(values);
    }
    return null;
};
//刷新scroll列表，內容有變的情況下，需要刷新列表，具體看參詳iscroll
$.fn.refresh = function() {
    if (this[0] && this[0].t) {
        return this[0].t.refresh();
    }
    return null;
};
//重新設置列表外圍容器的高度
$.fn.reSetHeight = function(height) {
    if (this[0] && this[0].t) {
        return this[0].t.reSetHeight(height);
    }
    return null;
};
//滾動到列表內，某個元素內,具體參詳iscroll
$.fn.scrollToElement = function(el, time, offsetX, offsetY, easing) {
    if (this[0] && this[0].t) {
        return this[0].t.scrollToElement(el, time, offsetX, offsetY, easing);
    }
    return null;
}

 

五、實例講解

 1、目錄結構

2、各個文件關鍵點

 

 

六、遇到的問題

 在寫此插件遇到最多的問題就是iscroll.js埋下的各種坑。關於這些坑的解決，網上已經有不少文章，這里就不贅述。在此分享一篇比較好的文章：【IScroll深入學習】解決IScroll疑難雜症

但是自ios9升級以來，在蘋果下回出現新的問題。當iscroll正在滾動時，如果再去觸摸屏幕會出現空白一閃。

解決此問題的方案是：在ios下不使用3D效果，直接改成2D效果。

更改源碼位置在_translate()方法之中，位於代碼836行。

更改代碼：

var u = navigator.userAgent, app = navigator.appVersion;
            var flag = !((!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/))||(u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1) || (u.indexOf('iPad') > -1))
            
            if(flag){
                this.scrollerStyle[utils.style.transform] = 'translate(' + x + 'px,' + y + 'px)' + this.translateZ;
            }else{
                this.scrollerStyle[utils.style.transform] = 'translate(' + x + 'px,' + y + 'px)' ;
            }

imgLoad.js的作用是為了解決頁面中圖片一部加載產生的問題，由於頁面的大小發生了變化，必須調用 iscroll 的 refresh 方法，但是如果在圖片加載完成之前調用refresh方法,iscroll計算出來的高度是錯誤的，因此只有在圖片加載完成之后，在調用refresh方法。

重點講講配置參數中curAjaxId的來歷：實際原型是這樣的，在一個頁面中有3個tab頁簽，每個tab頁簽請求的地址是一樣的，但是在快速切換時，前一個點擊的請求還沒有完成就點擊了第二個頁簽，而此時，他們所產生的數據又是append到同一個容器內，如是將會造成tab頁簽對應的數據亂串。解決此問題的方案有兩個，一是每個頁簽對應自己的容器，頁面初始化3個Loading。這樣數據變不會出現亂串的結果，但此方法會導致頁面的代碼過於冗余，頁面結構也相對復雜，於是就出現了curAjaxId。只要pageIndex的值為1，就會終止前面由此id發送的所有請求。這樣便不會出現數據亂串的問題。

 七、插件還需要擴展的地方

1、目前只支持json，對於html等沒有做處理

2、由於是從自己項目中剝離出來簡單重構的代碼，對於ajax的錯誤處理沒有給出

 

項目實例地址

https://github.com/kaisela/myjobs/tree/master/requirejs/iscrollLoading