iscroll使用方法

var myScroll,

    pullDownEl, pullDownOffset,

    pullUpEl, pullUpOffset,

    generatedCount = 0;

 

/**

 * 下拉刷新 （自定义实现此方法）

 * myScroll.refresh(); 数据加载完成后，调用界面更新方法

 */

function pullDownAction () {

    setTimeout(function () {   

        var el, li, i;

        el = document.getElementById('thelist');

 

        for (i=0; i<3; i++) {

            li = document.createElement('li');

            li.innerText = 'Generated row ' + (++generatedCount);

            el.insertBefore(li, el.childNodes[0]);

        }

         

        myScroll.refresh();     //数据加载完成后，调用界面更新方法 

    }, 1000);  

}

 

/**

 * 滚动翻页 （自定义实现此方法）

 * myScroll.refresh();      // 数据加载完成后，调用界面更新方法

 */

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.innerText = 'Generated row ' + (++generatedCount);

            el.appendChild(li, el.childNodes[0]);

        }

         

        myScroll.refresh();     //数据加载完成后，调用界面更新方法

    }, 1000);  

}

 

/**

 * 初始化iScroll控件

 */

function loaded() {

    pullDownEl = document.getElementById('pullDown');

    pullDownOffset = pullDownEl.offsetHeight;

    pullUpEl = document.getElementById('pullUp');  

    pullUpOffset = pullUpEl.offsetHeight;

     

    myScroll = new iScroll('wrapper', {

        scrollbarClass: 'myScrollbar',

        useTransition: false,

        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();   // ajax call

            } else if (pullUpEl.className.match('flip')) {

                pullUpEl.className = 'loading';

                pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';               

                pullUpAction(); // ajax call

            }

        }

    });

     

    setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);

}

 

//初始化绑定iScroll控件

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

document.addEventListener('DOMContentLoaded', loaded, false);