jQuery手机端上拉刷新下拉加载更多页面

<div id="wrapper">
<ul>
<li>row 10</li>
<li>row 9</li>
<li>row 8</li>
<li>row 7</li>
<li>row 6</li>
<li>row 5</li>
<li>row 4</li>
<li>row 3</li>
<li>row 2</li>
<li>row 1</li>
</ul>
</div>
<script>
for (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) {
document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
}
refresher.init({
id: "wrapper",//<------------------------------------------------------------------------------------┐
pullDownAction: Refresh,
pullUpAction: Load
});
var generatedCount = 0;
function Refresh() {
setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.querySelector("#wrapper ul");
el.innerHTML = '';
for (i = 0; i < 11; i++) {
li = document.createElement('li');
li.appendChild(document.createTextNode('async row ' + (++generatedCount)));
el.insertBefore(li, el.childNodes[0]);
}
wrapper.refresh();/****remember to refresh after  action completed！ ---yourId.refresh(); ----| ****/
for (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) {
document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
}
}, 1000);

}

function Load() {
setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.querySelector("#wrapper ul");
for (i = 0; i < 2; i++) {
li = document.createElement('li');
li.appendChild(document.createTextNode('async row ' + (++generatedCount)));
el.appendChild(li, el.childNodes[0]);
}
wrapper.refresh();/****remember to refresh after action completed！！！   ---id.refresh(); --- ****/
for (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) {
document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
}
}, 1000);
}
</script>