首先需要引入mescroll.min.css和mescroll.min.js
(注意:如果使用jquery需要引入jquery.min.js)
mescroll分页官网:http://www.mescroll.com/api.html#tagUpCallback
mescroll分页(body部分)
<div class="mescroll" id="mescroll">
<!-- 内容部分 -->
<div class="content" id="dataList">
</div>
</div>
mescroll分页(js部分)
$(function() {
var id = null;
var search = getQueryString('title') || '';
$('#search_input').val(search);
//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
var mescroll = new MeScroll("mescroll", {
//上拉加载的配置项
up: {
callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
empty: {
tip: "暂无相关数据~", //提示
},
page: {
num: 0,
size: 15,
time: null
},
toTop: { //配置回到顶部按钮
src: "/static/index/images/top.png", //默认滚动到1000px显示,可配置offset修改
offset: 800
},
clearEmptyId: "dataList" //相当于同时设置了clearId和empty.warpId; 简化写法;默认null
}
});
//上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
/*联网加载列表数据 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
function getListData(page) {
//联网加载数据
getListDataFromNet(search, page.num, page.size, function(curPageData, totalSize) {
//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
//设置列表数据
setListData(curPageData);
}, function() {
//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
mescroll.endErr();
});
}
/*设置正文内容,*/
function setListData(curPageData) {
var content = $('.content');
for (var i = 0; i < curPageData.length; i++) {
var p = curPageData[i];
var str = '<div class="product" id="' + p.id + '">' +
'<div class="product-name">' + p.name + '</div>' +
'</div>';
content.append(str);
}
}
/*联网加载列表数据
参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
* */
function getListDataFromNet(search, pageNum, pageSize, successCallback, errorCallback) {
$.ajax({
type: 'post',
url: '/Index/Index/getList',
data: {
page: pageNum,
num: pageSize
},
dataType: 'json',
success: function(response) {
//console.log(response);
var listData = response.data;
var totalSize = response.count;
if (response.code == 0) {
//回调
successCallback(listData, totalSize);
}
},
error: errorCallback
});
}
});