jquery：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> </head> <link rel="stylesheet" type="text/css" href="dropload.css"/> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="dropload.min.js" type="text/javascript" charset="utf-8"></script> <style> li{ list-style: none; width: 100%; height: 20px; background-color: #FF6000; color:#fff; font-size: 18px; line-height: 20px; text-align: center; margin-bottom: 10px; } </style> <body> <div id="load-block"> <ul ></ul> </div> <script> var index = 0; //起始获取数据的下标 var maxLength = 93; // 假设服务器返回100个数据 var length = 10; //假设每次获取10条数据 $('#load-block').dropload({ scrollArea : window, loadDownFn : function(me){ require(me); } }); function require(me){ var i = 0; for(i = index ;i < index + length;i++){ if(i > maxLength){ me.lock(); //me.unlock();解锁 me.noData(); //me.noData(false);有数据显示加载信息 }else{ var innerHtml = "<li>我是第" + i +"条数据</li>"; $(innerHtml).appendTo($("ul")); } } if(i == (index + length)){ index += length; } setTimeout(function(){ me.resetload(); //刷新 $(window).scroll(); //防止pc端界面一直处于底部，导致没有滑动，无法加载。 },2000); //2000的延时是模拟服务器端响应的时间。 } </script> </body> </html>
mui ：
<!DOCTYPE html> <html> <h1ead> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <link rel="stylesheet" type="text/css" href="mui.css"/> <script src="mui.min.js" type="text/javascript" charset="utf-8"></script> <script src="pullrefresh.js" type="text/javascript" charset="utf-8"></script> </h1ead> <body> <div class="mui-content"> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> <h1>花费大概和发达国家和房东</h1> </div> <div id="refresh"></div> <script> mui.init({ pullRefresh : { container:"#refresh",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等 up : { height:0,//可选.默认50.触发上拉加载拖动距离 auto:false,//可选,默认false.自动上拉加载一次 contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容 contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容； callback :function(){ //ajax 每一次请求都需要加：mui('#pullrefresh').pullRefresh().endPullupToRefresh();比如：mui('#pullrefresh').pullRefresh().endPullupToRefresh(response.data.data.length < 4);
}
//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； } } }); </script> </body> </html>
mui('#pullrefresh').pullRefresh().pullupLoading(); //自动上拉加载一次，作用和init中auto的作用一样。
mui('#pullrefresh').pullRefresh().refresh(true); // 如果有tab类别切换时，刷新一次
mui('#pullrefresh').pullRefresh().scrollTo(0,0,100); // tab栏切换的时候，列表置顶
github：https://github.com/WangChangyao/-.git