如何在mui上拉加载通过ajax获取数据，实现分页

来源：酷升汽车网

本文主要和大家分享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);
 }
 });
 }