您当前的位置: > 技术探讨 >
上拉加载分页
发布时间:2018-11-29 17:41编辑:admin阅读()
$(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= "";
//$(".contentDiv").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);
}
});
}
文章评论
-
尚未注册畅言帐号,请到后台注册