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