iscroll实现上拉加载下拉刷新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
    <title>下拉刷新上拉加载</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>— 下 拉 刷 新 —</header>
<section id="wrapper">
    <div id="scroller">
        <div id="pullDown">
            <span class="pullDownLabel">下拉刷新</span>
        </div>
        <ul id="list">
            <!--  渲 染 数 据  -->
        </ul>
        <div id="pullUp">
            <span class="pullUpLabel">上拉加载更多</span>
        </div>
    </div>
</section>
<footer>— 上 拉 加 载 —</footer>
<script src="js/iscroll.js"></script>
<script src="js/index.js"></script>
</body>
</html>

　//css样式

* {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; }

//js代码

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)
}