この記事では、主に、より多くのプルダウン リフレッシュ データをロードするための mui プルアップ ロードのカプセル化プロセスについて説明します。Mui プルアップ ロードとプルダウン リフレッシュは似ており、どちらも pullRefresh プラグインに属します。困っている友達は参考にしていただければ幸いです。
上拉刷新代码 $(document).ready(function(){ //上拉加载下拉刷新 mui.init({ pullRefresh: { container: '#pullrefresh', down: { contentdown: "下拉可以刷新", //可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容 contentover: "释放立即刷新", //可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容 contentrefresh: "正在刷新…", //可选,正在刷新状态时,下拉刷新控件上显示的标题内容 auto: false,//可选,默认false.首次加载自动下拉刷新一次 callback: pulldownRefresh }, up: { contentrefresh: '正在加载...', contentnomore:'我是有底线的', callback: pullupRefresh } } }); /** * 上拉加载 */ function pullupRefresh() { setTimeout(function () { mui('#pullrefresh').pullRefresh().endPullupToRefresh((isOver)); //参数为true代表没有更多数据了。 getData();//ajax }, 500); } }); var pageStart = 0;//开始数据条数 var pageSize = 10;//每页显示条数 var isOver = false;//是否加载完function getData(){ var url = requestUrl; var _startLimit = pageStart*pageSize;//每次传入后台的数据条数,比如0 10 20 var $loadingToast = $('#loadingToast'); $.ajax({ type: "get", url: url, timeout:10000, data: { startLimit:_startLimit }, dataType: "json", success: function(data) { console.log(data); if(data.success == true){ var list = data.data; for(i in list){ str= ""; //$(".contentp").append(str); jQuery(str).insertBefore('#pullrefresh .mui-scroll .mui-table-view'); } //判断是否还有数据,若小于每次加载条数,结束 if(list.length < pageSize){ isOver = true; } //每次加载结束之后,如果还有数据则++ if(isOver == false){ pageStart++; } } }, error: function(XMLHttpRequest, textStatus, errorThrown){ console.log("请求失败!!!" + textStatus); $loadingToast.fadeOut(100); } }); }
関連する推奨事項:
例では、Mui プルアップ ロードとその他のプルダウン リフレッシュ データのカプセル化プロセスを詳しく説明します
プルアップ ロードとプルダウン リフレッシュを実装する MUI の例の共有
以上がページングを実現するために、Ajax を介して mui にデータを取得してロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。