jquery插件：iscroll
页面布局：
下拉刷新...
上拉加载更多...

翻页，是通过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 = ''; 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 = '; el.insertbefore(li, el.childnodes[0]); }) } }); //============================================ myscroll.refresh(); // 数据加载完成后，调用界面更新方法 remember to refresh when contents are loaded (ie: on ajax completion) }, 1000); // 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 = ''; 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);