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