JQuery插件iScroll實現下拉刷新滾動翻頁特效_

1、JQuery插件iScroll實現下拉刷新，滾動翻頁特效_ JQuery插件：iScroll 頁面布局： div id=wrapper div id=scroller div id=pullDown span class=pullDownIcon/spanspan 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

2、=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/spanspan class=pullUpLabel上拉加載更多./span /div /div翻頁，是通過ajax懇求，把頁碼傳入一般處理程序，在一般處理程序中獲得分頁后的數據返回json數組對象。 下拉刷新： /* * 下拉刷新 （自定義實現此方法） * myScroll.refresh(); / 數據加載完成后，調用

3、界面更新方法 */ 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);

4、/ li.innerText = Generated row + (+generatedCount); li.innerHTML = img src= + this.src + /; el.insertBefore(li, el.childNodes0); ) ); myScroll.refresh(); /數據加載完成后，調用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion) , 1000); / - Simulate network congestion, remove setTimeou

5、t 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.createE

6、lement(li); / li.innerText = Generated row + (+generatedCount); li.innerHTML = img src= + this.src + /; el.insertBefore(li, el.childNodes0); ) ); /= myScroll.refresh(); / 數據加載完成后，調用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion) , 1000); / - Simulate network congestion,

7、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: my

8、Scrollbar, /* 重要樣式 */ 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.queryS

9、elector(.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.classNam

10、e = ; 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 (

11、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(.pullD

12、ownLabel).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