模塊代碼之上拉加載下拉刷新

HTML結構，其中固定命名有，如#wrapper、#scrollbar、#pullDown、#pullUp、.pullDownLabel、.pullUpLabel。如果想更改，則需要在iscrollControl.js中修改。代碼如下：

<div class="layout" id="wrapper">
    <div id="scrollbar">
        <div id="pullDown">
            <span class="pullDownLabel">下拉刷新...</span>
        </div>
        <ul id="thelist">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div id="pullUp">
            <span class="pullUpLabel">上拉加載更多...</span>
        </div>
    </div>
</div>

內部js文件，自定義實現下拉刷新、上拉加載方法：pullDownAction()、pullUpAction()。代碼如下：

//下拉刷新（自定義實現此方法）
function pullDownAction () {
    setTimeout(function () {        //模擬網絡堵塞, 設置延遲
        var el, li, i;
        el = document.getElementById('thelist');

        for (i=0; i<3; i++) {
            li = document.createElement('li');
            li.innerHTML = '1';
            el.insertBefore(li, el.childNodes[0]);
        }
        myScroll.refresh();        //數據加載完成后，調用界面更新方法 (ie: on ajax completion)
    }, 1000);    
}

function pullUpAction () {
    setTimeout(function () {   
        var el, li, i;
        el = document.getElementById('thelist');
        for (i=0; i<3; i++) {
            li = document.createElement('li');
            li.innerHTML = '111';
            el.appendChild(li, el.childNodes[0]);
        }    
        myScroll.refresh();        // 數據加載完成后，調用界面更新方法 (ie: on ajax completion)
    }, 1000);    
}

外部js文件：iscroll.js、iscrollControl.js;其中iscrollControl.js如下，可根據自己的需求再在對應的函數中添加代碼。

//初始化綁定iScroll控件 
var myScroll;
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false); 
//初始化iScroll控件
function loaded() {
    var pullDownEl = document.getElementById('pullDown');
    var pullDownOffset = pullDownEl.offsetHeight;
    var pullUpEl = document.getElementById('pullUp');    
    var pullUpOffset = pullUpEl.offsetHeight;
    
    myScroll = new iScroll('wrapper', {
        scrollbarClass: 'myScrollbar', /* 重要樣式 */
        topOffset: pullDownOffset,
        onRefresh: function () {
            if (pullDownEl.className.match('loading')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
            } else if (pullUpEl.className.match('loading')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加載更多...';
            }            
        },
        onScrollMove: function () {
            if (this.y > 5 && !pullDownEl.className.match('flip')) {
                pullDownEl.className = 'flip';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手開始更新...';
                this.minScrollY = 0;
            } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                this.minScrollY = -pullDownOffset;
            } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                pullUpEl.className = 'flip';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手開始更新...';
                this.maxScrollY = this.maxScrollY;
            } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加載更多...';
                this.maxScrollY = pullUpOffset;
            }
        },
        onScrollEnd: function () {
            if (pullDownEl.className.match('flip')) {
                pullDownEl.className = 'loading';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '加載中...';                
                pullDownAction();    // Execute custom function (ajax call?)
            } else if (pullUpEl.className.match('flip')) {
                pullUpEl.className = 'loading';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '加載中...';                
                pullUpAction();    // Execute custom function (ajax call?)
            }
        }
    });
}