如何在mui上拉加载通过ajax获取数据,实现分页
程序员文章站
2022-03-19 15:16:51
...
本文主要和大家分享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上拉加载通过ajax获取数据,实现分页的详细内容,更多请关注其它相关文章!
上一篇: 使用CSS3制作进度条
下一篇: css的绝对定位怎么兼容所有的分辨率