移動端下拉刷新上拉加載更多組件Iscroll組件的使用

前階段作app H5頁面

有一個列表頁須要下拉刷新上拉加載更多的需求，找到了Iscroll組件。看了相應的js，其實現這個功能的原理是監聽滾動事件，利用滾動的方向，滾動的距離實現功能。以前用過的iscroll的邏輯大體是監聽滾動的距離和5px作了一個比較，而後給固定的頭部（內容爲向下刷新）活底部（內容爲上拉加載更多）添加或者移除相應的類，而後在經過判斷頭部或者底部是否存在這個類來進行的一個判斷，從而觸發刷新或者ajax請求加載更多。

其實爲了完成這個需求找過兩版插件，可是初版出現了問題：當內容大於一屏的時候才能顯現出來，當上拉的時候，屏幕並不能順滑的向上滑動，並且在鬆開手以後內容老是定位到最上端，效果和裏面內容設置了top:0同樣。其實我就簡單的試驗了一下demo，後來出了bug在去試驗demo的時候發現demo也有這個問題（囧）。

後來又找了一個基於iscroll的dem，由於適合具體的業務相關，因此對其進行了實例化，下面貼出代碼：

//function pullWay(option) {    var pageNo = 2;    function Refresh() {        setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!            var el, li, i;            el = document.getElementById('thelist');            //這裏寫你的刷新代碼            document.getElementById("wrapper").querySelector(".pullDownIcon").style.display = "none";            document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML = "<img src='../../images/ok.png'/>刷新成功";            setTimeout(function () {                wrapper.refresh();                document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML = "";            }, 1000); //模擬qq下拉刷新顯示成功效果            /****remember to refresh after  action completed！ ---yourId.refresh(); ----| ****/        }, 1000);    }    function Load() {            setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!                var el, li, i;                el = document.getElementById('thelist');                $.ajax({                    type: "GET",                    url: option.url,                    data: {                        pageSize: 1,                        pageNo: pageNo++                    },                    dataType: "json",                    // contentType: 'application/json',                    success: function (data) {                        var html = option.ajaxWay(data);                        for (i = 0; i < 1; i++) {                            li = document.createElement('li');                            li.innerHTML = html;                            el.appendChild(li, el.childNodes[0]);                            if (option.details) {                                option.details();                            }                            wrapper.refresh();  // 數據加載完成後，調用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)                        }                    }                });            }, 1000); // <-- Simulate network congestion, remove setTimeout from production!            setTimeout(function(){                wrapper.refresh();  // 數據加載完成後，調用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)            },3300)    }    var refresher = {        info: {            "pullDownLable": "下拉刷新",            "pullingDownLable": "釋放當即刷新",            "pullUpLable": "上拉加載更多",            "pullingUpLable": "釋放加載更多",            "loadingLable": "加載中..."        },        init: function (parameter) {            var wrapper = document.getElementById(parameter.id);            var div = document.createElement("div");            div.className = "scroller";            wrapper.appendChild(div);            var scroller = wrapper.querySelector(".scroller");            var list = wrapper.querySelector("#" + parameter.id + " ul");            scroller.insertBefore(list, scroller.childNodes[0]);            var pullDown = document.createElement("div");            pullDown.className = "pullDown";            var loader = document.createElement("div");            loader.className = "pullDownIcon";            pullDown.appendChild(loader);            var pullDownLabel = document.createElement("div");            pullDownLabel.className = "pullDownLabel";            pullDown.appendChild(pullDownLabel);            scroller.insertBefore(pullDown, scroller.childNodes[0]);            var pullUp = document.createElement("div");            pullUp.className = "pullUp";            var loader = document.createElement("div");            loader.className = "pullUpIcon";            pullUp.appendChild(loader);            var pullUpLabel = document.createElement("div");            pullUpLabel.className = "pullUpLabel";            var content = document.createTextNode(refresher.info.pullUpLable);            pullUpLabel.appendChild(content);            pullUp.appendChild(pullUpLabel);            scroller.appendChild(pullUp);            var pullDownEle = wrapper.querySelector(".pullDown");            var pullDownOffset = pullDownEle.offsetHeight;            var pullUpEle = wrapper.querySelector(".pullUp");            var pullUpOffset = pullUpEle.offsetHeight;            this.scrollIt(parameter, pullDownEle, pullDownOffset, pullUpEle, pullUpOffset);        },        scrollIt: function (parameter, pullDownEle, pullDownOffset, pullUpEle, pullUpOffset) {            eval(                parameter.id + "= new iScroll(\                           parameter.id,\                            {\                               useTransition: true,\                               vScrollbar: false,\                               topOffset: pullDownOffset,\                               onRefresh: function () {\                                            refresher.onRelease(pullDownEle,pullUpEle);\                                                       },\                              onScrollMove: function () {\                                               refresher.onScrolling(this,pullDownEle,pullUpEle,pullUpOffset);\                                                      },\                              onScrollEnd: function () {\                                              refresher.onScrollEnd(pullDownEle,parameter.pullDownAction,pullUpEle,parameter.pullUpAction);\                                                      }\                              })"            );        },        onScrolling: function (e, pullDownEle, pullUpEle, pullUpOffset) {            if (e.y > -(pullUpOffset) && !pullDownEle.className.match('loading')) {                pullDownEle.classList.remove("flip");                pullDownEle.querySelector('.pullDownLabel').innerHTML = refresher.info.pullDownLable;                pullDownEle.querySelector('.pullDownIcon').style.display = "block";                e.minScrollY = -pullUpOffset;            }            if (e.scrollerH < e.wrapperH && e.y > e.maxScrollY - pullUpOffset && pullUpEle.className.match("flip") || e.scrollerH > e.wrapperH && e.y > e.maxScrollY - pullUpOffset && pullUpEle.className.match("flip")) {                pullUpEle.classList.remove("flip");                pullUpEle.querySelector('.pullUpLabel').innerHTML = refresher.info.pullUpLable;            }            if (e.y > 0 && !pullUpEle.className.match('loading') && !pullDownEle.className.match('loading')) {                pullDownEle.classList.add("flip");                pullDownEle.querySelector('.pullDownLabel').innerHTML = refresher.info.pullingDownLable;                e.minScrollY = 0;            }            if (e.scrollerH < e.wrapperH && e.y < (e.minScrollY - pullUpOffset) && !pullDownEle.className.match('loading') && !pullUpEle.className.match('loading') || e.scrollerH > e.wrapperH && e.y < (e.maxScrollY - pullUpOffset) && !pullDownEle.className.match('loading') && !pullUpEle.className.match('loading')) {                pullUpEle.classList.add("flip");                pullUpEle.querySelector('.pullUpLabel').innerHTML = refresher.info.pullingUpLable;            }        },        onRelease: function (pullDownEle, pullUpEle) {            if (pullDownEle.className.match('loading')) {                pullDownEle.classList.toggle("loading");                pullDownEle.querySelector('.pullDownLabel').innerHTML = refresher.info.pullDownLable;            }            if (pullUpEle.className.match('loading')) {                pullUpEle.classList.toggle("loading");                pullUpEle.querySelector('.pullUpLabel').innerHTML = refresher.info.pullUpLable;            }        },        onScrollEnd: function (pullDownEle, pullDownAction, pullUpEle, pullUpAction) {            if (pullDownEle.className.match('flip') && !pullDownEle.className.match('loading')) {                pullDownEle.classList.add("loading");                pullDownEle.classList.remove("flip");                pullDownEle.querySelector('.pullDownLabel').innerHTML = refresher.info.loadingLable;                if (pullDownAction) pullDownAction();            }            if (pullUpEle.className.match('flip') && !pullUpEle.className.match('loading')) {                pullUpEle.classList.add("loading");                pullUpEle.classList.remove("flip");                pullUpEle.querySelector('.pullUpLabel').innerHTML = refresher.info.loadingLable;                if (pullUpAction) pullUpAction();            }        }    }    refresher.init({        id: "wrapper", //<------------------------------------------------------------------------------------┐        pullDownAction: Refresh,        pullUpAction: Load    });}原版的init函數，Refresh函數和Load函數不在這個js裏面，爲了作成一個統一的組件，將其封裝在這個js裏面，這樣pullWay就是惟一的入口，傳入相應的參數便可，你能夠把page，ajax等在外部隨意變化，最後當作參數傳進來。對比一個以前的js，我作了一個比較，區別在於對於距離的選取更精確和更準確，並木有明確的數字，而是在觸發事件的時候，對於相應的事件距離和容器距離進行獲取和對比，從而進行下一步的判斷和事件觸發。實現的效果和官方demo的效果同樣，符合如今大部分的下拉刷新上拉加載更多的需求，和原生的區別在於最下面的上拉加載更多的按鈕不能在頂部定位，而是始終在內部內容的最下方。這個我後續會去找demo或者方法去優化，但願這篇文章對你們有用，若是有什麼不清楚的地方或者因爲本身的項目形成的不適用，歡迎一塊兒來討論。