iScroll-5拉動刷新功能實現與iScroll-4上拉刷新的一點改進

近來在學習移動設備的應用開發，接觸了jQuery mobile，在網上查閱相關資料時發現一個叫”iScroll“的小插件。其實這個iScroll插件跟jQuery mobile沒有多大關系，並不是基於jQuery mobile類庫開發的js插件，是一個獨立的js插件，使用它時不必預先引用jquery或jquery mobile類庫。關於iScroll的詳細介紹可以去它的官網了解或者去GitHub（https://github.com/cubiq/iscroll/）下載它的源碼學習。iScroll現在已經更新為iScroll-5，但並沒有加入太多新的功能，只是對前一個版本iScroll-4進行重構優化與修復，而且官方消息說不再對iScroll-4進行維護和技術支持，建議使用新版本。官方說法如下：

iScroll-5與iScroll-4的差別還挺大的，首先在聲明定義上寫法就不一樣了。

iScroll-4：	iScroll-5：
var myScroll = new iScroll('wrapper', { useTransition: true, topOffset: pullDownOffset, onRefresh: function () { ... }, 　　 onScrollStart: function () { 　　 　　... 　　 }, 　　 onScrollMove: function () { 　　 　　... 　　 }, 　　 onScrollEnd: function () { 　　 　　... 　　 } 　　 　　 .... });	var myScroll = new IScroll('#wrapper', { mouseWheel: true, scrollbars: true, startY:-pullDownOffset ... }); //Event: scroll start myScroll.on("scrollStart", function() { ... }); //Event: scroll myScroll.on('scroll', function(){ ... }); //Event: scrollEnd myScroll.on("scrollEnd", function() { ... }); //Event: refresh myScroll.on("refresh", function() { ... }); ...

 

從上面兩者的示例代碼對比，以前的聲明定義是new iScroll('wrapper'...)，現在變為new IScroll('#wrapper'...)，類名變為大寫I開頭了，容器的Id要加上前綴#，某些參數名稱改變了（以前的topOffset變為startY和startX），關鍵是事件（event）不再是從options參數中指定，而是用on去注冊等等。

還有一個重大的不同是，iScroll-5按照功能點不同自身又划分為不同的版本，官方划分如下：

還有其他的差異就不再逐個列出了，大家可以到官網去了解。

其實iScroll之所以吸引我，主要是在iScroll-4中的demo里面有一個叫”pull-to-refresh“的示例，也就是我們說拉動更新，包括列表內容的下拉和上拉更新。這個功能在觸摸的移動應用上經常用到，可以不誇張的說是必不可少的。但這個重要的示例在新版iScroll-5的demo中卻找不到了。不知什么原因作者將它去掉了（據說iScroll-4的pull-to-refresh這個示例並不是作者的傑作），我在網上找了很久都沒發現有關於iScroll-5官方的pull-to-refresh示例，個別實現的例子倒也是有一些，但效果都不是很令人滿意。為了加深和鞏固對iScroll的學習，本人就參考iScroll-4的pull-to-refresh示例來實現iScroll-5的拉動刷新功能，同時也對iScroll-4的pull-to-refresh示例根據個人需求進行了一點改進。

首先給出iScroll-4的pull-to-refresh示例改動后的代碼：

<script type="text/javascript">

var myScroll,
    pullDownEl, pullDownOffset,
    pullUpEl, pullUpOffset, _maxScrollY;
var generatedCount = 0;

function pullDownAction () {
    setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
        var el, li, i;
        el = document.getElementById('thelist');

        for (i=0; i<3; i++) {
            li = document.createElement('li');
            li.innerHTML = '(Pull down) Generated row ' + (++generatedCount);//Firefox  does not suppose innerText, use innerHTML instead.
            el.insertBefore(li, el.childNodes[0]);
        }
        
        myScroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
    }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
}

function pullUpAction () {
    setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
        var el, li, i;
        el = document.getElementById('thelist');

        for (i=0; i<3; i++) {
            li = document.createElement('li');
            li.innerHTML = '(Pull up) Generated row ' + (++generatedCount);//Firefox  does not suppose innerText, use innerHTML instead.
            el.appendChild(li, el.childNodes[0]);
        }
        
        myScroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
    }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
}

function loaded() {
    pullDownEl = document.getElementById('pullDown');
    pullDownOffset = pullDownEl.offsetHeight;
    pullUpEl = document.getElementById('pullUp');    
    pullUpOffset = pullUpEl.offsetHeight;
    
    
    myScroll = new iScroll('wrapper', {
        useTransition: true,
        topOffset: pullDownOffset,
        onRefresh: function () {
            console.log('maxScrollY-0:'+this.maxScrollY);
            _maxScrollY = this.maxScrollY = this.maxScrollY + pullUpOffset;
            console.log('maxScrollY-1:'+this.maxScrollY);
            if (pullDownEl.className.match('loading')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
            } else if (pullUpEl.className.match('loading')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
                this.scrollTo(0,this.maxScrollY,0);
            }
        },
        onScrollMove: function () {
            console.log('maxScrollY-3:'+this.maxScrollY);
            if (this.y > 5 && !pullDownEl.className.match('flip')) {
                pullDownEl.className = 'flip';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
                this.minScrollY = 0;
            } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                this.minScrollY = -pullDownOffset;
            } else if (this.y <= (_maxScrollY - pullUpOffset) && !pullUpEl.className.match('flip')) {
                pullUpEl.className = 'flip';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
                this.maxScrollY = this.maxScrollY - pullUpOffset;
            } else if (this.y > (_maxScrollY - pullUpOffset) && pullUpEl.className.match('flip')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
                this.maxScrollY = this.maxScrollY + pullUpOffset;
            }
        },
        onScrollEnd: function () {
            if (pullDownEl.className.match('flip')) {
                pullDownEl.className = 'loading';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';                
                console.log('pull down---scroll end');
                pullDownAction();    // Execute custom function (ajax call?)
            } else if (pullUpEl.className.match('flip')) {
                pullUpEl.className = 'loading';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
                console.log('pull up---scroll end');                
                pullUpAction();    // Execute custom function (ajax call?)
            }
        }
    });
    
    
    setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>

上面代碼高亮標注（黃色底色）的地方是主要的改動點，對於第15，30行標注的innerHTML原來例子是innerText，但我發現在firefox運行后新增的li會顯示不了內容（應該是firebox不支持innerText），改為innerHTML后就正常顯示了。其他處的改動主要是針對maxScrollY這個變量，這樣改主要是為了讓列表內容滾動到底部時上拉前不顯示提示欄。

iScroll-4 示例改動前：	iScroll-4 示例改動后：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

下面參照iScroll-4改動后的push-to-refresh示例來實現iScroll-5的拉動刷新功能。使用iScroll-5來實現的話，要引用的js類庫是iScroll-5細分后的iscroll-probe.js，按照前面的划分介紹，此細分版本主要是為了探查當前滾動位置(x,y)。在實現過程中我發現類庫有一小處源碼是需要改動的，主要是解決鼠標滑輪向頂部滾動時，不顯示下拉提示欄（這個問題在iScroll-4下是不存在的，應該跟iScroll-5去掉了minScrollY這個變量有關），我們希望在下拉時才會出現提示欄。

解決辦法其實也不復雜，只需改動一下iscroll-probe.js文件里面的第1122行處的一小段代碼。如下圖：

之所以這樣修改，主要是參考iScroll-4里面的源碼。如下圖：

好，源文件iscroll-probe.js的修改就完成了，下面給出iScroll-5拉動刷新功能的頁面js代碼：

<script type="text/javascript">

var myScroll, 
    pullDownEl, pullDownOffset,
    pullUpEl, pullUpOffset, _maxScrollY;
    
var generatedCount = 0;

function pullDownAction(){
        setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
            var el, li, i;
            el = document.querySelector('#scroller ul');
    
            for (i=0; i<3; i++) {
                li = document.createElement('li');
                li.innerHTML = '(Pull down) Generated row ' + (++generatedCount);//Firefox  does not suppose innerText, use innerHTML instead.
                el.insertBefore(li, el.childNodes[0]);
            }
            if(myScroll){
                myScroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
            }
        }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
}

function pullUpAction () {
    setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
        var el, li, i;
        el = document.querySelector('#scroller ul');

        for (i=0; i<3; i++) {
            li = document.createElement('li');
            li.innerHTML = '(Pull up) Generated row ' + (++generatedCount);//Firefox  does not suppose innerText, use innerHTML instead.
            el.appendChild(li, el.childNodes[0]);
        }
        if(myScroll){
            myScroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
        }
    }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
}

function loaded() {
    pullDownEl = document.querySelector('#pullDown');
    if (pullDownEl) {
        pullDownOffset = pullDownEl.offsetHeight;
    } else {
        pullDownOffset = 0;
    }
    pullUpEl = document.querySelector('#pullUp');    
    if (pullUpEl) {
        pullUpOffset = pullUpEl.offsetHeight;
    } else {
        pullUpOffset = 0;
    }
    
    console.log('pullDownOffset:'+pullDownOffset);
    console.log('pullUpOffset:'+pullUpOffset);
    
    //Options of IScroll
    var myOptions = {
            mouseWheel: true,
            scrollbars: true,
            fadeScrollbars: true,
            probeType:1,
            startY:-pullDownOffset
        };
    myScroll = new IScroll('#wrapper',myOptions);
    console.log('maxScrollY-1:'+myScroll.maxScrollY);
    _maxScrollY = myScroll.maxScrollY = myScroll.maxScrollY + pullUpOffset;
    console.log('maxScrollY-2:'+myScroll.maxScrollY);
    
    var isScrolling = false;
    
    //Event: scrollStart
    myScroll.on("scrollStart", function() {
        if(this.y==this.startY){
            isScrolling = true;
        }
        console.log('start-y:'+this.y);
    });
    
    //Event: scroll
    myScroll.on('scroll', function(){
        if (this.y >= 5 && pullDownEl && !pullDownEl.className.match('flip')) {
            pullDownEl.className = 'flip';
            pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh';
            //this.minScrollY = 0;
        } else if (this.y < 5  && pullDownEl && pullDownEl.className.match('flip')) {
            pullDownEl.className = '';
            pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh';
            //this.minScrollY = -pullDownOffset;
        }else if (this.y <= (_maxScrollY - pullUpOffset) && pullUpEl && !pullUpEl.className.match('flip')) {
            pullUpEl.className = 'flip';
            pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh';
            //this.maxScrollY = this.maxScrollY;
            this.maxScrollY = this.maxScrollY - pullUpOffset;
        } else if (this.y > (_maxScrollY - pullUpOffset) && pullUpEl && pullUpEl.className.match('flip')) {
            pullUpEl.className = '';
            pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more';
            //this.maxScrollY = pullUpOffset;
            this.maxScrollY = this.maxScrollY + pullUpOffset;
        }
                    
        console.log('y:'+this.y);
    });
    
    //Event: scrollEnd
    myScroll.on("scrollEnd", function() {
        console.log('scroll end'); 
        console.log('directionY:'+this.directionY);
        console.log('y1:'+this.y);
        console.log('maxScrollY-3:'+this.maxScrollY);
        if (pullDownEl && !pullDownEl.className.match('flip') && this.y > this.options.startY) {
            console.log('resume'); 
            this.scrollTo(0, this.options.startY,800);
          }
        else if (pullDownEl && pullDownEl.className.match('flip')){
                pullDownEl.className = 'loading';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';                
                // Execute custom function (ajax call?)
                if (isScrolling) {
                    console.log('before pull down action:'+this.y); 
                    pullDownAction();
                      console.log('after pull down action:'+this.y); 
                  }
        }
        else if (pullUpEl && pullUpEl.className.match('flip')) {
                console.log('pull up loading'); 
                pullUpEl.className = 'loading';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';    
                // Execute custom function (ajax call?)
                if (isScrolling) {            
                    console.log('before pull up action:'+this.y); 
                    pullUpAction();    
                    console.log('after pull up action:'+this.y); 
                }
        }
        isScrolling = false;
    });
    
    //Event: refresh
    myScroll.on("refresh", function() {
          
         console.log('maxScrollY-4:'+this.maxScrollY);
         _maxScrollY = this.maxScrollY = this.maxScrollY+pullUpOffset;
         console.log('maxScrollY-5:'+this.maxScrollY);
         
         if (pullDownEl  && pullDownEl.className.match('loading')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh';
                this.scrollTo(0,this.options.startY,0);
         } else if (pullUpEl && pullUpEl.className.match('loading')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more';
                this.scrollTo(0,this.maxScrollY,0);
         }
         
         console.log('refresh finished!'); 
    });
    
    setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 500);
    
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

</script>

運行效果：

iScroll-4:
iScroll-5:

后話：按照官網的介紹iScroll-5比iScroll-4更快，性能更好。但在上面的拉動刷新的示例中，iScroll-5在firefox中運行時比iScroll-4要占用更多的CPU，感覺iScroll-4要流暢得多，但僅限於拉動功能的比較，至於iScroll的其他功能沒有測試對比過，所以也不敢以偏概全地斷言說iScroll-5的性能就比上iScroll-4。有興趣的朋友可以去測試一下，測完后給我分享一下結果，謝謝！