mui下拉加载 php,如何在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);

}

});

}

相关推荐：