JQuery插件iScroll实现下拉刷新，滚动翻页特效

JQuery插件：iScroll
页面布局：

<div id="wrapper"><div id="scroller"> <div id="pullDown"><span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> </div> <ul id="thelist"><li> <img src="img/page1_img1.jpg" /></li><li> <img src="img/page1_img2.jpg" /></li><li> <img src="img/page1_img3.jpg" /></li><li> <img src="img/page1_img1.jpg" /></li><li> <img src="img/page1_img2.jpg" /></li><li> <img src="img/page1_img3.jpg" /></li> </ul> <div id="pullUp"><span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span> </div></div>

翻页，是通过ajax请求，把页码传入一般处理程序，在一般处理程序中获得分页后的数据返回json数组对象。
下拉刷新：

/*** 下拉刷新 （自定义实现此方法）* myScroll.refresh（）; // 数据加载完成后，调用界面更新方法*/function pullDownAction（） { setTimeout（function （） { var el, li, i;el = document.getElementById（"thelist"）;//==========================================$.ajax（{ type: "GET", url: "LoadMore.ashx", data: { page: generatedCount }, dataType: "json", success: function （data） {var json = data;$（json）.each（function （） { li = document.createElement（"li"）; // li.innerText = "Generated row " + （++generatedCount）; li.innerHTML = "<img src="" + this.src + ""/>"; 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 （） {var el, li, i;el = document.getElementById（"thelist"）;//==========================================$.ajax（{ type: "GET", url: "LoadMore.ashx", data: { page: generatedCount }, dataType: "json", success: function （data） {var json = data;$（json）.each（function （） { li = document.createElement（"li"）; //li.innerText = "Generated row " + （++generatedCount）; li.innerHTML = "<img src="" + this.src + ""/>;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！}

初始化

/*** 初始化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（）; // Execute custom function （ajax call?） } else if （pullUpEl.className.match（"flip"）） {pullUpEl.className = "loading";pullUpEl.querySelector（".pullUpLabel"）.innerHTML = "加载中...";pullUpAction（）; // Execute custom function （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）;