iscroll实现上拉加载下拉刷新

* {margin: 0;padding: 0; }

header, footer {width: 100%;height: 40px;line-height: 40px;background: #EEEEEE;text-align: center;font-size: 18px;font-weight: 600; position: absolute;left: 0; }

header {top: 0; }

footer {bottom: 0; }

section {overflow-y: scroll;background: lightskyblue;position: absolute;top: 40px;bottom: 40px;width: 100%; }
section ul {padding: 5px; }
section ul li {background: #FFFFFF;margin-bottom: 10px;text-align: center;line-height: 36px;list-style: none; }
#scroller {position: absolute;top: -30px;left: 0;width: 100%; }
#scroller #pullDown, #scroller #pullUp {padding: 0 10px;height: 30px;line-height: 30px;color: #888;text-align: center; }

var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0;
loaded(); //根据下拉距离更改内容
init(); // 初始化页面内容
function pullDownAction() {
    setTimeout(function () {
        //do init
        console.log('刷新完成');
        myScroll.refresh();
    }, 1000)
}
function pullUpAction() {
    var wrap =document.getElementById('list')
    for(var i=0;i<5;i++){
        var newli = document.createElement('li');
        newli.innerHTML = '加载数据--' + (++generatedCount);
        wrap.appendChild(newli)
    }
    myScroll.refresh()
}
function init(){
    var wrap =document.getElementById('list')
    for(var i=0;i<10;i++){
        var newli = document.createElement('li');
        newli.innerHTML = '初始数据--' + (++generatedCount);
        wrap.appendChild(newli, wrap.childNodes[0])
    }
    myScroll.refresh()
}
function loaded(){
    pullDownEl = document.getElementById('pullDown');
    pullUpEl = document.getElementById('pullUp');
    pullDownOffset = pullDownEl.offsetTop;
    pullUpOffset = pullUpEl.offsetTop;
    myScroll = new iScroll('wrapper',{
        topOffset: pullDownOffset,
        onScrollMove: function () {
            if(this.y > 40 && !pullDownEl.className.match('flip')){
                pullDownEl.className = 'flip';
                pullDownEl.querySelector(".pullDownLabel").innerHTML = "释放刷新";
            }else if(this.y <this.maxScrollY && !pullUpEl.className.match('flip')){
                pullUpEl.className = 'flip';
                pullUpEl.querySelector(".pullUpLabel").innerHTML = "释放刷新";
            }

        }
        ,
        onScrollEnd: function () {
            if (pullDownEl.className.match("flip")) {
                pullDownEl.className = "loading";
                pullDownEl.querySelector(".pullDownLabel").innerHTML = "正在加载";
                pullDownAction();
            }else if(pullUpEl.className.match("flip")){
                pullUpEl.className = "loading";
                pullUpEl.querySelector(".pullUpLabel").innerHTML = "正在加载";
                pullUpAction();
            }
        },
        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 = "加载更多";
            }
        }
    })
    console.log(myScroll)
}