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請求，把頁碼傳入一般處理程序，在一般處理程序中獲得分頁后的數(shù)據(jù)返回json數(shù)組對象。

下拉刷新：

/** * 下拉刷新 （自定義實(shí)現(xiàn)此方法） * myScroll.refresh(); // 數(shù)據(jù)加載完成后，調(diào)用界面更新方法 */ 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(); //數(shù)據(jù)加載完成后，調(diào)用界面更新方法 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(); // 數(shù)據(jù)加載完成后，調(diào)用界面更新方法 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);