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

JQuery插件：iScroll

页面布局：

<div> <div><div><span></span><span>下拉刷新...</span></div><ul><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><span></span><span>上拉加载更多...</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);